200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > css中字体大小font-size的设置

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

时间:2022-02-10 01:21:02

相关推荐

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

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和手机都可以在线观看教程微信公众号直播有哪些不一样的玩法?

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。