CSS中字体设置的说明
其中的CSS样式最混乱的方面是应用程序中的文本字体大小属性的延伸。在CSS,你可以使用四种不同的计量单位显示在Web浏览器中的文本大小。这四个单位是最适合网络引起了广泛的争论。这是很难找到一个明确的答案,因为它很难回答。
与这些单位接触
1。Ems(EM):em一种可扩展的Web文档媒体显示单元。一个EM等于当前的字体,大小,例如,如果文档中的字体大小是12磅,1 EM是12角。Ems本质上是可扩展的,所以他们是相当于2 24铂和5 EM等于6 PT等on.ems是因为它的可扩展性和适应移动设备的特点,成为越来越流行的Web文档。
2。像素:像素(PX)固定大小的单元用于屏幕媒体(即在电脑屏幕上阅读),一个像素相当于电脑屏幕上的一个点(屏幕分辨率最低分),许多网站设计师使用像素单位的Web文档的制作网站,通过浏览器完全以像素为单位的呈现。一个问题是,它并没有延伸到视障读者适应移动设备。
三.点(PT):点通常被用在印刷媒体(媒体的任何印在纸上的,等等),一点等于一英寸的1 / 72.points更像是像素,它们是固定大小的单位,不能延伸。
4。百分比(%):百分比单位更像em单位,除了一些基本的差异。首先,目前的字体大小为100%(例如,12磅= 100%)。使用百分比单元时,你的文字依然保持完整的可扩展性和可访问性的移动设备。
那么,有什么区别呢
当您动态观察它们时,很容易理解字体大小单位之间的区别。一般来说,1个EM = 12个PT = 16个像素= 100%个。当使用这些字体大小时,从100%到120%添加字体的基本尺寸(使用CSS选择器),让我们看看会发生什么。
正如您所看到的,随着基本字体大小的增加,EM和百分比单位变大了,但PX和PT没有变化。为文本设置绝对大小很容易,但是在访问者中使用可伸缩文本更容易,并且可以显示任何设备或机器。因此,EM和百分比单元是Web文档文本的首选。
EM与百分比的比较
我们定义点和像素单元不一定是最合适的Web文档,剩下的是EM和百分比单元。理论上,EM和百分比单元是相同的,但是在应用中,它们实际上有一些细微的差别需要考虑。
在上面的例子中,我们使用的百分比单位作为我们的基础字体大小(body标签)。如果你改变字体大小的百分比为EMS(体{字体大小:1 EM;}),你可能不会注意到差异。让我们看到1 em这是我们的身体字体大小。当客户端更改浏览器的文本大小和设置(在一些浏览器,如Internet Explorer中)时,会发生什么
当客户端的浏览器文字大小设置为medium有EMS和百分比之间没有区别。然而,当设置的改变,差异是很大的。Ldquo;Smallest,EMS比比例小得多,当设置为Largest然后,相反,EMS大于百分比。也许有人说,当他们正在扩大,EM单元扩展。在实际应用中,文本规模太大。在一些客户机上,最小的文本不是很清楚。
获胜者:百分比(%)
一般来说,当我开始一个新的设计,我将使用百分比(体{字体大小:62.5%;})身上的元素,并将它与电磁单元的大小比较。只要身体利用率单位设置,你可以选择使用百分比或EMS或其他的CSS规则和选择器,并保持你的基础字体大小比例的好处。在过去的几年里,这确实已经成为设计的标准。
现在像素被认为是可以接受的字体大小单位(用户可以使用浏览器缩放功能读取文本),虽然由于屏幕密度非常高的移动设备(Android和iPhone设备每英寸超过200到300像素,所以你11像素的12字体很难看到它们!)开始出现一些问题,因此,我将继续在Web文档中使用百分比作为基本字体大小。
结论
在理论上,电磁单元的新的和即将出现的字体大小的标准在互联网上,但在实践中,比例单元是为用户提供更加一致的和可访问的显示。当客户端设置改变,百分比文本是在合理比例的扩大,让设计师保持可读性、可及性和视觉设计。