CSS的字体单位有哪些
本篇内容主要讲解“CSS的字体单位有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS的字体单位有哪些”吧!
10年积累的网站建设、网站制作经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先制作网站后付款的网站建设流程,更有廊坊免费网站建设让你可以放心的选择与我们合作。
对于绘图和印刷而言,“单位”相当重要,然而在网页排版里,单位也是同样具有重要性,在CSS3普及以来,更支持了一些方便好用的单位(px、em、rem…等),这篇文章将整理这些常用的CSS单位,也帮助自己未来在使用上能更加得心应手。
“网页”和“印刷”的单位
若要把单位做区隔,最简单可以分为“网页”和“印刷”两大类,通常对于CSS来说只会应用到网页的样式,毕竟真正要做印刷,还是会倾向透过排版软件来进行设计。
网页(单位)
px:绝对单位,代表屏幕中每个「点」(pixel)。
em:相对单位,每个子元素透过「倍数」乘以父元素的px值。
rem:相对单位,每个元素透过「倍数」乘以根元素的px值。
%:相对单位,每个子元素透过「百分比」乘以父元素的px值。
网页(属性名称)
medium:预设值,等于16px(h5预设值)
xx-small:medium的0.6倍(h7预设值)
x-small:medium的0.75倍
small:medium的0.8倍(h6预设值,W3C定义为0.89,实测约为0.8)
large:medium的1.1倍(h4预设值,W3C定义为1.2,实测约为1.1)
x-large:medium的1.5倍(h3预设值)
xx-large:medium的2倍(h2预设值)
smaller:约为父层的80%
larger:约为父层的120%
印刷
pt:打印机的每个「点」,定义为1 pt=1/72 in,如果在72 dpi的系统上1 px = 1 pt,但如果在96dpi的系统上1 px = 0.75 pt(72/96 = 0.75)。
in:英寸,在96 dpi的系统上1 in = 96 px。
cm:厘米,在96 dpi的系统上1 cm = 37.795275593333 px。
mm:毫米,在96 dpi的系统上1 cm = 3.7795275593333 px。
示例展示
以下将展示四种不同单位的示例,为公平起见,四个示例都套用预设的div格式,纯粹改变font-size看看有何不同,由于子元素若没有设定font-size,会自动继承父元素的font-size,使用上就应该要预先初始化字体大小,下面这两段CSS可以将所有的元素字体大小预设为16px,然后可个别进行调整。
html{
font-size:16px;
}
html * {
font-size: 1rem;
}
1. px
px是绝对单位,因此只要设定多少px,就会精确的呈现,对于一些讲求精准位置的排版而言十分有用,如示例表示的,指定多大px字体就会多大。
2. em
em是相对单位,为每个子元素透过“倍数”乘以父元素的px值,如果我们每一层div都使用1.2em,最内层就会是16px x 1.2 x 1.2 x 1.2 x 1.2 x 1.2 = 39.8px。(浏览器预设字体大小为16px,若无特别指定则会直接继承父元素字体大小)
3. rem
rem是相对单位,为每个元素透过“倍数”乘以根元素的px值,如果我们每一层div都使用1.2rem,最内层就会是16px x 1.2 = 19.2px。(根元素指的是html的font-size,预设为16px)
4. %
%百分比是相对单位,和em大同小异,简单来说em就是百分比除以一百,如果我们每一层div都使用120%,就等同于1.2em,最内层就会是16px x 1.2 x 1.2 x 1.2 x 1.2 x 1.2 = 39.8px。
5.small、medium、large…等
字体大小的属性有七种,分别是xx-small、x-small、small、medium、large、x-large和xx-large,除了x-small,其余六种分别对应h7——h2的标签文字大小,根据W3C的规范,以medium预设16px为基础(若html字体预设大小改变,medium也会跟着变),使用固定的百分比乘以medium的大小,例如ss-small预设为16px x 0.6 = 9.6px(浏览器显示为12px)。
6. larger、smaller
larger和smaller就是固定百分比为单位,larger为父层的120%,smaller为父层的80%。
到此,相信大家对“CSS的字体单位有哪些”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
网站题目:CSS的字体单位有哪些
本文地址:http://scyanting.com/article/pogces.html