css中字体大小font-size的设置

news/2024/12/5 7:12:15/

font-size CSS 属性指定字体的大小。因为该属性的值会被用于计算em和ex长度单位,定义该值可能改变其他元素的大小。

/* <absolute-size>,绝对大小值 */
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;/* <relative-size>,相对大小值 */
font-size: larger;
font-size: smaller;/* <length>,长度值 */
font-size: 12px;
font-size: 0.8em;/* <percentage>,百分比值 */
font-size: 80%;font-size: inherit;

可用方法节
有多重定义字体大小的方法,包括了使用关键字及使用像素或em数字值。请根据网页的特定需求选择适用的方法。

关键字节
关键字是定义网络字体大小的好方法。通过在body元素上定义关键字字体大小,你可以在网页的任何地方设置相对字体大小,这让你能轻易地缩放整个网页的字体大小。

像素节
当你需要精确地像素时,用px设定字体大小是一种好方法。一像素的大小是固定的。这是一个不取决于平台的、跨浏览器的准确设置字体大小高度为你所想的像素大小的方法。因为不同浏览器为得到同样效果的算法可能不同,所以显示效果可能有微小的不同。

字体大小的设置也可以使用组合值。例如,如果父元素设定为16px而子元素设定为larger, 子元素显示的字体大小就会大于父元素。

注意: 用像素字体定义使得字体大小不可由用户的浏览器改变。(例如,视力较低用户可能希望使用比网页设计师设定的字体大小大很多的字体)所以,如果你想创造能广泛使用的设计请避免使用像素设定字体。
Em节
另一种方法是用em值设定字体大小。em 值的大小是动态的。当定义或继承font-size属性时,1em等于该元素的字体大小。如果你在网页中任何地方都没有设置文字大小的话,那它将等于浏览器默认文字大小,通常是16px。所以通常1em = 16px。2em = 32px。 如果你设置了body元素的字体大小为20px,那1em = 20px、2em = 40px。那个2就是当前em大小的倍数。

可用这个公式计算像素大小的等价em大小:

em = 希望得到的像素大小 / 父元素字体像素大小


例如,假设body的文字大小设为1em,且浏览器默认1em = 16px。如果你想得到12px,那你就可设定0.75em (because 12/16 = 0.75)。同样的,如果你想设定文字大小为10px,那就定义0.625em (10/16 = 0.625);若想要22px就定义1.375em (22/16=1.375).

一个流行的技巧是设置body元素的字体大小为62.5% (即默认大小16px的62.5%),等于10px。现在你可以通过计算基准大小10px的倍数,在任何元素上方便的使用em单位。这样有6px = 0.6em, 8px = 0.8em, 12px = 1.2em, 14px = 1.4em, 16px = 1.6em。

 

我的原创文章整理:

  • 视频中常用的HLS(m3u8)协议分析
  • 视频二维码的适用场景
  •  本地网络环境测试(上传带宽下载行带宽)
  • 新版谷歌Chrome允许flash的选项已不再保存和添加了(如何解决?)
  • 视频播放常见问题让IIS支持mp4、flv等mime类型的设置
  • HTML5倍数功能视频播放器(加速2倍,1.5倍播放)
  • HTML5之Video对象属性和方法(html5播放器设计必须研究的)

我的视频应用类原创文章:

  • 微信公众号直播有哪些不一样的玩法?
  • 微信视频直播如何做收费直播(如何做付费的微信直播)图文教程
  • 说说视频编码格式、视频码率、视频帧率、分辨率的概念
  • 原创教程:带ppt课件和讲师画面的教学视频录制完整教程
  • 如何做电视节目的视频直播(电视台节目直播)
  • 做视频直播时如何测试本地网络的上行带宽(网速测试)
  • usb摄像头做教学直播实现pc和手机都可以在线观看教程
  • 微信公众号直播有哪些不一样的玩法?

http://www.ppmy.cn/news/213957.html

相关文章

STM32---ucosii和ucosiii

一、关于ucos 几个 UCOSII 相关的概念需要大家了解一下。任务优先级&#xff0c;任务堆栈&#xff0c;任务控制块&#xff0c;任务就绪表和任务调度器。 任务优先级&#xff0c;这个概念比较好理解&#xff0c; ucos 中&#xff0c;每个任务都有唯一的一个优先级。优先级是任务…

C++中sizeof,strlen(),size(),length()的区别

strlen()&#xff0c;size()&#xff0c;length()用于求字符串的长度&#xff0c;sizeof用于求对象的字节大小 sizeof本质上是一个运算符&#xff0c;它会返回保证能容纳所建立的最大对象的空间大小&#xff0c;其值在编译时便计算好了&#xff0c;所以不能用于计算动态分配的…

ZigBee 3.0(ZCL,ZHA)

文章目录 1、ZigBee 3.0 ZCL 基础概念1.1 Profile1.2 Device ID1.3 Cluster ID1.4 Attribute&#xff08;属性&#xff09;1.5 Command&#xff08;命令&#xff09; 2、ZigBee 3.0 ZHA 1、ZigBee 3.0 ZCL 基础概念 ZCL&#xff08;ZigBee 集群库&#xff09;包含各种应用的 P…

MiniUI属性

<div id"yjsYhzGrid" ----设置ID class"mini-datagrid" multiSelect"false" ----若属性值为false&#xff0c;则只能选中一行&#xff1b;反之可以选择多行。&#xff08;默认属性值为false&#xff09; showSummaryRow"true" -…

miniui 属性

miniui 值的变化&#xff1a; 主要监听下拉框 单选框值的变化。 onvaluechanged“函数” 隐藏代码块 标签 document.getElementById(“id绑定内容”).style.display“none”; 显示代码块 标签 document.getElementById(“id”).style.display“block”; 禁用标签 mini.get(“id…

microblaze c语言,MicroBlaze

转自http://blog.163.com/gcs_gcs/blog/static/17448606620121193113914/ 在最近的工程中,需要用到PS/2键盘和鼠标作为控制输入,所以在网上找了一些相关的资料,内容很丰富,看来已经有很多人做过了这方面的编程。本篇Blog算是实践总结,为以后的开发积累一些基础知识。 Micr…

Yolo-Z

yolo太卷了...这里是改进的YOLOv5用于小目标检测 论文地址&#xff1a;https://arxiv.org/pdf/2112.11798.pdf 随着自动驾驶汽车和自动驾驶赛车越来越受欢迎&#xff0c;对更快、更准确的检测器的需求也在增加。 虽然我们的肉眼几乎可以立即提取上下文信息&#xff0c;即使是…

Z变换(Z-transform)

Z变换(Z-transform) 定义 X ( z ) ∑ n − ∞ ∞ x ( n ) z − n x ( n ) 1 2 π j ∮ c X ( z ) z z − 1 d z X(z)\sum_{n-\infty}^{\infty}x(n)z^{-n}\\ x(n)\frac{1}{2\pi j}\oint_c X(z)z^{z-1}dz X(z)n−∞∑∞​x(n)z−nx(n)2πj1​∮c​X(z)zz−1dz 收敛域&#…