当前位置:首页 > 日记 > 正文

CSS中字体设置的说明

CSS中字体设置的说明
本文主要介绍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文档中使用百分比作为基本字体大小。

结论

在理论上,电磁单元的新的和即将出现的字体大小的标准在互联网上,但在实践中,比例单元是为用户提供更加一致的和可访问的显示。当客户端设置改变,百分比文本是在合理比例的扩大,让设计师保持可读性、可及性和视觉设计。

相关文章

WPS分类表快速求和法WPS表教程

WPS分类表快速求和法WPS表教程

教程,分类,快速,和法,电脑软件,我们经常在WPS表中使用和函数,我们经常使用自动筛选来分类信息,如图。 当我们按建设项目的性质来筛选新项目时,总投资仍然是所有项目的总投资额。如果我们只需要计算新项目的总投资额,那么总和就无能为力了。 …

入门教程:ai宽度工具使用教程

入门教程:ai宽度工具使用教程

工具使用教程,宽度,入门教程,电脑软件,ai,本教程是向朋友介绍ai宽度工具,非常适合初学者。 本教程的朋友对人工智能工具的使用实例教程的宽度,使用宽度工具扩大描边路径图,并调整各种形状的影响。朋友也可以使用此工具来创建和保存自定义宽度…

哪里是pscs6动画调整pscs6动画窗口

哪里是pscs6动画调整pscs6动画窗口

动画,调整,方法,窗口,电脑软件,哪里是pscs6动画一个以前使用旧版本PS的朋友怎么突然在新版PS中没有动画不pscs6取消动画它必须是不可能的。那么,为什么pscs6没有动画 一个以前使用旧版本PS的朋友怎么突然在新版PS中没有动画不pscs6取消动画…

js实现防止iframe

js实现防止iframe

电脑软件,js,iframe,本文阐述了JS实现被iframe的预防途径。分享给你供你参考。以下是如下: 方法1: 从一个 / /休息的iframe,如果有人把你的网站 在一个无聊的顶杆/短网址服务的东西。 传递'这',并重新混为'窗口 /确保 窗口对象还没有被覆…

我怎样收集我的空间QQ常见问题

我怎样收集我的空间QQ常见问题

常见问题,空间,电脑软件,QQ,QQ空间收藏家可以收集所有你喜欢的服装,并使它很容易打扮起来以后。收集你的太空服的方式,请按照以下步骤: 第一步:你可以在自己的空间里装扮自己,然后点击衣服空间; 第二步:我穿衣,当衣服收到时,就会有成功的提醒; 第三…

的math.atan2()方法在Javascript中使用详解

的math.atan2()方法在Javascript中使用详解

方法,详解,电脑软件,math,Javascript,此方法返回其参数商逆切,但方法返回的角度θ之间的PI和PI值(x,y)点。 语法 math.atan2(x,y); 下面是参数的详细信息: x和y:一个数字。 返回值: 返回一个数的弧度反正切 math.atan2(0,0)返回+ PI。 math.atan2(+ 0 …

面对PS服装美女照片

面对PS服装美女照片

美女照片,电脑软件,PS,在一张化装照片里做你的脸多漂亮啊! 看一个比较漂亮的服装美女照片,怎么也想拍一张漂亮的服装照片,别担心,我们现在可以用PS软件来给他看,合成服装的照片不是很漂亮,很漂亮,如果可以去拍一张,呵呵,这种方法的脸上画的很有实用…

情感、个性、签名、情感签名的情感

情感、个性、签名、情感签名的情感

情感,个性,电脑软件,记录说,写下快乐与悲伤,甜蜜与酸楚的生活,记录下他的变化之心。下面的心情说,总有一个适合你的。 你答应我一个承诺的时刻,但让我在一个世界的记忆中浪费。 不懂不懂,只是不想懂,不想懂,不敢懂。 爱与爱,爱与无情是同情,没有爱情…

谈到JSON.parse()和JSON.stringify()

谈到JSON.parse()和JSON.stringify()

电脑软件,JSON,parse,stringify,1.parse用于解析JSON对象从一个string.for例子 var 它通过JSON.parse(STR): 对象:年龄:23 名称:公积金 _proto_:对象 ps:每个属性上写的单引号必须是{,双引号,否则会抛出异常。 2.stringify用于解析字符串对象,例…

通过使用CSS3在角落的轮廓效果的实

通过使用CSS3在角落的轮廓效果的实

教程,轮廓,角落,效果,电脑软件,本文主要介绍了利用CSS3实现本教程的角的轮廓效果,一般用于实现该框架的效果,需要的朋友可以参考下 首先,大纲是一件伟大的事情。 1。边境的近亲 轮廓和边界是近亲。为什么这么说首先,它们都是在元素之外设置的。…

PHP实现使用存储上传和下载SAE文件

PHP实现使用存储上传和下载SAE文件

文件,下载,上传,方法,电脑软件,本文介绍了PHP实现SAE上传和下载文件的实现方法,供大家参考: 如果($ _files { 文件 { 回声错误:_files美元{文件 } 其他的 { 回声上传:文件 _files美元{ 回声型:_files美元{文件 回声($ _files {大小:。文件 。_file…

一个关于如何使用CSS3实现泡沫的影

一个关于如何使用CSS3实现泡沫的影

泡沫,如何使用,电脑软件,本文主要介绍了CSS3的使用实现了泡沫效应,这是经常使用的对话框类,需要的朋友可以参考下 首先定义一个 CSS代码将内容复制到剪贴板。 首先将样式添加到外部容器: CSS代码将内容复制到剪贴板。 p.speech { 职位:相对; …