网页中常用字体介绍

网页上该如何选择字体的问题。问题虽然小,但是却是前端开发中的基本,因为目前的网页,还是以文字信息为主,而字体,作为文字表现形式的最重要参数之一,自然有着相当重要的地位。可惜字体的重要性在很长时间内并没有得到足够的重视。很多人对字体的概念还是停留在 font-family: "宋体", Arial, Helvetica, serif 的阶段,却不明白为什么这样设置,这样设置是否合理等等。现在就让我说说字体的来龙去脉吧。

- font-family

大家知道CSS规则中定义字体是通过 font-family 这条规则来实现的。仔细翻翻CSS的文档,却没有发现任何能指定某一个特定字体的规则。

想想十年前,你可以随处看见类似于这样的代码:

 

<font face="Frankin Gothic Book">Lorem Ipsum</font>

 

几乎不会有人考虑到,Frankin Gothic Book是一个 Windows only 的字体。在一台Mac上根本看不到Frankin Gothic Book字体的效果,系统因为找不到这种字体,就改用Mac的默认字体显示了。于是,网页的风格就和原来完全不一样了,根本达不到Frankin Gothic Book的效果。于是W3C提出了font set 的概念——将一系列近似的字体按照优先级顺序组成一个列表;浏览器从列表头部开始匹配,知道找到第一个可用的字体,并使用该字体进行显示。

比如上面这个例子,我们可以创建这样的一个font set:

 

<span style='font-family: "Franklin Gothic Book","Lucida Grande"'>Lorem Ipsum</span>

 

我们来看看浏览器怎么来呈现这段文字吧:
  • Windows下:浏览器从列表的第一个字体开始搜索——系统中存在Frankin Gothic Book,使用Frankin Gothic Book字体显示。
  • Mac 下:浏览器从列表的第一个字体开始搜索——系统中不存在Frankin Gothic Book,搜索失败。继续搜索下一个字体——Lucida Grande。系统中存在Lucida Grande字体,终止搜索,并用Lucida Grande字体显示。

这样在Mac上,Mac就能以与Frankin Gothic Book类似的Lucida Grande字体显示这段文字。

 

但是可能存在一台电脑,上面既没有Frankin Gothic Book字体,也没有Lucida Grande字体,那么它仍然无法正确显示上面的这段文字。于是开发人员不得不在这个字体列表中不断增加字体以适应各种系统,导致这个font set失去原本的“组织近似字体”的作用。于是font set中引入了“通用字体族”,也就是我们经常看见的 serif 和 sans-serif。我会在今后的文章中详细的介绍这两个,以及一些其他的通用字体族。在这里,我们可以简单的将它们理解为一种“在所有指定字体都失效的情况下,浏览器指定的一种最终的代用字体”。

比如我们在改进一下上面的那段示例文字:

 

<span style='font-family: "Franklin Gothic Book","Lucida Grande",sans-serif'>Lorem Ipsum</span>

 

我们再看看浏览器怎么来呈现这段改进后的文字吧:
  • Windows下:浏览器从列表的第一个字体开始搜索——系统中存在Frankin Gothic Book,使用Frankin Gothic Book字体显示。
  • Mac 下:浏览器从列表的第一个字体开始搜索——系统中不存在Frankin Gothic Book,搜索失败。继续搜索下一个字体——Lucida Grande。系统中存在Lucida Grande字体,终止搜索,并用Lucida Grande字体显示。
  • 某系统:浏览器从列表的第一个字体开始搜索——系统中不存在Frankin Gothic Book,搜索失败。继续搜索下一个字体——系统中也不存在Lucida Grande字体。继续搜索下一个字体——通用字体sans-serif。浏览器应用它的默认sans-serif字体"Arial"来显示这段文字。

 

请注意两点。首先,通用字体族具体对应哪个字体,是由浏览器决定的。上面例子中浏览器指定Arial为sans-serif字体,但完全有可能另一个浏览器指定Helvetica 为它的sans-serif字体。具体哪个字体被最终应用,是无法预期的。其次,通用字体族只是一种在font set中其他字体都无效时的代用方案。因此——设计者应该尽可能的给出齐全的font set,以尽可能的覆盖所有的系统,而不应该依赖于通用字体族

 

类似于以下的两种写法都是错误的

 

<span style="font-family:sans-serif">Lorem Ipsum</span>
<span style="font-family:sans-serif,Arial">Lorem Ipsum</span>

 

第一种写法的错误在于——它相当于根本没有指定字体,仍旧是交由浏览器选择字体。写了相当于没写。

第二种写法的错误在于顺序。因为通用字体族应该在一个font set中其它所有字体都失效时才起作用。因此,将指定字体放在通用字体之后,会造成制定字体尚未匹配时就使用了通用字体。所以,你应该务必使通用字体处在font set中的最后一位

 

另外,这里要说明两件事情。

首先,浏览器应用font set中哪个字体的规则虽然看上去很简单,但其实非常trickish。我会在以后的文章中做出具体的说明。

其次,虽然字体的CSS规则名称叫font-family, 但它的实质是一个font set,而不等是印刷意义上的font family。印刷上的font family 是指一系列相同字样的不同强度组合,比如Lucida Family(包括Lucida Sans, Lucida Sans Typewriter, Lucida Console, Lucida Grande等等)和Arial Family(Arial, Arial Black, Arial Rounded MT等等),但显然这些font family 都不适合直接拿来当作一个font set来使用。

 

- serif

Serif 在印刷学上指衬线字体。为了理解衬线字体的概念,大家先看几个典型的衬线字体的例子:

My
Georgia字体 King
Times New Roman 字体 汉字
宋体

单词 My 中的字母 “M”上下方突出的短横线就是所谓的衬线。同样,y的上方,K的上下,i 和n的下方也都有衬线,所以这些字体都被称为衬线字体。但衬线字体并不一定都有衬线,比如上面例子中的g, “汉”和“字”。事实上,只要满足末端加强原则的字体都是衬线字体。所谓的末端加强,就是使用衬线或粗细变化,使字体笔画的末端得到加强,以改善小号文字的可读性。比如上面例子中的y的下半部分,还有宋体的中文字符,都是采取加粗笔划的末端来达到末端加强的效果。除此之外,很多衬线字体还会采用加强竖向笔划(比如宋体中竖比横粗),夸张字形(最明显的就是小写g这个字符了)等方法进一步改善它的可读性。

因为衬线字体的可读性非常好,所以它应用的最多的地方也正是出版物或者印刷品的正文内容等以大段文字作为表现形式的作品上。

比较常见的衬线字体有 Georgia, Garamond, Times New Roman, 中文的宋体等等。

 

- sans-serif

衬线字体以外的一切字体都是无衬线字体。sans- 这个前缀其实是法语,所以比较标准的发音是 /san/ 而不是 /sans/。它的意思是“没有”。所以sans-serif就是无衬线字体。

Gut
Verdana 字体 Might
Arial 字体 书写
幼圆

无衬线字体比较圆滑,线条一般粗细均匀。比较适合用作艺术字、标题等。因为无衬线字体通常粗细比较均匀,所以在小字体显示的时候,可读性会降低,容易引起视觉疲劳。

常见的无i衬线字体有 Trebuchet MS, Tahoma, Verdana, Arial, Helvetica, 中文的幼圆、隶书等等。

 

- 什么时候用serif?什么时候用sans-serif?

从上面的介绍中,我们可以知道,衬线字体之所以被设计出来,就是为了用作正文内容的。大家可以随手抄起一张报纸,看看上面的文章是不是宋体。如果手头有外语读物的话,也可以翻来看一下,正文都是衬线字体。同样大小的衬线字体比无衬线字体容易阅读:

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

然后大家可以把报纸翻到头版头条——标题一般都会是各种粗细一致的综艺体或者是中黑体。英文报纸的标题大多也是无衬线的。这个就是应用他们的基本原则。

但是大家可以看很多网站——它们的正文内容恰恰是无衬线的Tahoma, Verdana, Arial等等。中文网站可能因为字体的局限性,仍旧使用宋体居多,但查看它们的样式表,就会发现候补字体也大多是无衬线的。这样是不是不好呢?

 

当然不是。

 

衬线字体的可读性其实仅仅体现在小字体上。大家可以拿出刚刚抄起来的报纸,和你显示器上的文字比较一下——你会发现,报纸上的文字比显示器上的文字整整小一圈。实际上,新明晚报上通常大小的宋体文字,在点距为0.25mm的高质量液晶显示器上,大小大约只相当于10px ~ 11px的显示字符;在普通的液晶显示器(点距一般为0.28mm)上,甚至可能只相当于8px~10px的显示字符。

这个就是 print media 和 screen media 的最大区别。印刷业为了节约成本,因此会尽可能的在保证可读的情况下,把文字印小。显示器不存在这样的成本,因此可以显示比较大的文字。在文字足够大的情况下,无衬线字体也是同样可读的。而且因为无衬线字体通常有艺术性,因此在显示器上显示通常比较赏心悦目;而且无衬线字体种类比衬线字体多得多,因此选择余地也很大。所以大家尽可以放心去使用。但是必须保证以下原则:凡是使用无衬线字体的,必须保证其在正文内容中的可读性。否则,使用衬线字体。换而言之,如果你要使用无衬线字体显示网页的正文内容,那么,你必须把它的font-size设的足够大,以保证用户能轻易阅读

至于具体将font-size 设多大,是因字体而异的。12px 对于 Verdana 来说已经完全足够,但是要能轻易的阅读隶书,可能需要24px以上才行。

对于11px以下的英文字体,推荐使用衬线字体。至于中文,因为显示器的硬件限制,不论是什么字体,都不推荐使用11px以下的font-size来显示。

 

- 其他的通用字体族

印刷学中,除了serif 和 sans-serif 之外,通常还有 monospace 等宽字体、scripts 手写体(比如花体)、blackletter 铅字体(也叫 gothic 哥特体。严格的说,很多常用的serif字体其实是gothic字体)、ornamental 装饰体(那些在文字笔划上或者周围有装饰花纹的字体。很多中世纪书籍上很常见。如果脑残体真的成了字体,那么应该可以算装饰体吧……)和 symbol 符号字体(比如有名的wedding123……)。

 

不过CSS对通用字体族的定义有点不一样。除了serif 和 sans-serif 之外,CSS还允许以下几个通用字体族:
  • monospace 等宽字体所谓的等宽字体,是指每个字符宽度都一致的字体。一个著名的例子就是 Courier New 字体。因为字符宽度一致,所以特别容易对齐,能快速精确的定位到某行某列,因此经常用来显示代码。要注意的是,一个等宽字体同时也可以是一个衬线(或者非衬线)字体。比如 Courier New 这个字体也可以看作是一个serif(严格的说是gothic)字体。
  • cursive 书写体:相当于印刷学中的手写体。中文的华文行草就是这样的一个字体。
  • fantasy 梦幻体:相当于印刷学中的装饰体。非常少见的一种字体,基本没有参考价值。

要注意的是,CSS中不支持symbol字体族。使用symbol类的字体请用图片。

 

- 一些你不知道的事情

  • 中文的黑体其实是衬线字体。大家可以看下面的图:黑体大家可以看到,其实黑体的确是经过末端加强的,所以很多印刷品的正文也会使用黑体。像这种使用温和的末端加强,笔划粗细大致一致的字体,其实也可以被称为petit-serif/小衬线体。(那些类似于宋体一样有显著末端加强,并且笔划粗细有明显区别的,通常称为slab-serif/雕版衬线体)只是很遗憾,因为诸多的硬件原因,在显示器上实际显示黑体时,大家还是可以把它看作一个无衬线字体
  • Italic 不是斜体斜体是oblique。Italic 顾名思义,是意大利体。Italic 是一种书写方式(calligraphy script),而oblique 是一种印刷样式,两者是不同的东西。中学英语习字册交授的书写方式就是意大利体。除了意大利体外,比较流行的书写方式还有法兰西体(就是传说中的花体字,正名是French Script)、哥特体、亚伯拉罕体等等。很多考究的字体都会为意大利体定制一套特殊的字体,而不是简单的显示成斜体。比如下面的图片里,三行文字都是Georgia字体。第一行普通;第二行是oblique,也就是斜体;第三行才是真正的italic意大利体。Italic and Oblique大家仔细看第三行的a, l, i, e 等字母——很明显的看出区别了吧。实际上,Georgia Italic 和 Georgia 在系统内是两个不同的字体文件。当我们指定 font-style: italic 的时候,系统就会自动搜寻是不是存在Georgia Italic这个字体,并尝试使用这个字体来显示文字内容。按理说当我们用 font-style: oblique 指定字体样式时,浏览器不应该去寻找Georgia Italic这个字体,而直接将Georgia字体倾斜显示,所以理论上应该得到图中第二行文字的效果。可惜,连W3C在CSS规范中,自己的参考实现也说是“如果UA不能正确显示italic 和oblique, 可以使用italic来代替oblique显示”,所以几乎没有浏览器实现区分italic 和oblique。哪怕你设置的font-style是oblique, 你也会发现,浏览器显示的也还是italic

 

- 规范中 font-family 的解释方式

我们定义下面这个字体表:

font-family: "Comic Sans MS", "幼圆", "黑体", sans-serif;

按照W3C的规范,浏览器在使用这个 font-family 显示一个字符时,首先应该寻找 Comic Sans MS 字体。如果找不到 Comic Sans MS 字体,那么顺序搜寻下一个字体,即幼圆字体。如果找到 Comic Sans MS 这个字体,那么浏览器会在 Comic Sans MS 字体中寻找这个字符。如果找到这个字符,就使用 Comic Sans MS 字体来显示这个字符。如果没有找到这个字符,或者这个字符对应一个缺字符(缺字符是字体文件中的一种特殊字符,用来表示字体文件中没有这个字符。通常就是显示一个方块),那么就要到下一个字体,也就是幼圆体中继续搜寻这个字符。如此搜索整个字体表,知道搜索到这个字符为止。如果在通用字体,也就是这里的 sans-serif 字体中也找不到这个字符的话,那么浏览器就应该显示该字体的缺字符。

所以,如果有下面这句话:

所以我说:“这也是没办法的,it ain't going nowhere”。

那么,在一个正常的Windows XP系统上,所有中文字符都会被显示为幼圆,英文字符都被显示为 Comic Sans MS 字体。比如“说”字,浏览器先搜索 Comic Sans MS 字体,得到一个缺字符,于是搜索幼圆。系统中存在幼圆字体,于是终止搜索,将“说”字显示为幼圆字体。对于英文字符“i”,浏览器在 Comic Sans MS 这个字体中就能找到这个字符,于是就用 Comic Sans MS 显示 i 这个字符。

另外,双引号——“”,这两个字符其实在 Comic Sans MS 中也有。所以浏览器会用 Comic Sans MS 中的双引号来显示。

- 事实上呢?

大家来看看截图吧:

Internet Explorer 7
浏览器实际显示效果:IE7

Firefox 2
浏览器实际显示效果:Firefox 2

Opera 9
浏览器实际显示效果:Opera 9

Safari 3.1 Windows
浏览器实际显示效果:Safari 3.1

……简直是一个浏览器一个样子嘛

这样还叫人怎么正经干活嘛

 

仔细看看,其实Firefox 和Safari 显示的还算靠谱,在这个例子里,显示的都正确。IE 和 Opera 都没有能用正确的字体显示中文字符。因为在 Comic Sans MS 搜索失效后,理应搜索幼圆字体。但不知道因为什么原因,IE 和 Opera 都没有顺序搜索下一个字体,甚至也没有搜索后面的黑体和sans-serif,而是直接跳到系统默认字体了——请注意,是系统默认字体,因为我已经在 Opera 里把 sans-serif 设成了雅黑,如果 Opera 还有良心搜索下 sans-serif 的话,还是应该用雅黑显示中文字符的。而且,不知怎么的,Comic Sans MS 中明明存在的双引号,也没能在 Opera 中得到正确的显示。什么号称最完美支持 CSS 的浏览器嘛,简直浪得虚名

IE 7 起码还好些,至少认了和英文字符直接相连的双引号。但是除此之外,也算是完败。

另外大家也不要认为Safari 是好人——某些版本的 Safari 3 for Windows 在第一个字体中寻找不到中文字符时,它干脆就显示了那个字体的缺字符,于是,所有的中文网页变成了整屏的囗囗囗囗囗囗囗,根本无法阅读   经本人和其他许多发现这个bug的人多次向Apple交涉,他们才最终修正了这个bug。

至于 Firefox, 其实也不完美,因为 Firefox 不支持字体别名。于是幼圆你只能写成"幼圆",黑体你只能写成"黑体",而不能用他们在系统中的正式字体名称——YouYuan 和 SimHei 。

对于浏览器为什么会产生这么多五花八门的奇怪渲染,偶也不知道,估计只有问这些浏览器的开发人员了

- 解决方案

因为主流浏览器在中文显示中实在无法统一,因此,解决上面这个问题的办法也只能是折衷和妥协的方案。至于如何折衷,那么要看你到底想要保证英文字符的显示效果,还是中文字符的显示效果。

 

如果你希望保证中文的显示效果,那么你必须把你想要显示的中文字体放在 family-font 定义的第一位。比如上面例子里的样式定义,你可以写成:

font-family: "幼圆", "Comic Sans MS", sans-serif;

这样就可以保证所有中文字符都显示为幼圆。至于为什么 IE 和 Opera 又认了在 font-family 首位的幼圆,这个也不要问偶,总之它们就是认了

这样做的缺点也是显而易见的。一般中文字体中都会包含英文字符,比如上面的幼圆。所以网页中的英文字符也会优先应用这些中文字体来显示。而中文字体中的英文字符,通常都不怎么好看。比如还是这个幼圆,里面的英文字符根本就和宋体一模一样,根本和幼圆中的中文字符不搭调。于是中英混排的文章就极其难看。而且很遗憾,一般网页上,中英混排的情况还是很多的,比如用户名、日期时间、URL等等,总是少不了英数字……

另外,这个方案也不能从根本上解决浏览器对中文字符支持的缺陷。比如这种情况:有人非常喜欢黑体字的效果,所以想用微软雅黑来显示你的网页,但是考虑到只有 Windows Vista 才有微软雅黑字体,所以打算在没有雅黑的电脑上用黑体来显示文字,于是他写了这么个样式规则:

font-family: "微软雅黑", "黑体", sans-serif;

但实际测试下来,他会发现,即使第一个字体设置成了中文字体,在这个字体缺失的情况下,IE 和 Opera 还是不会使用第二位的黑体,而继续它们自己的莫名其妙的规则,使用了系统默认字体——宋体。这显然还是不能满足设置 font-family 属性的初衷。

 

第二个方案是,仍旧按照CSS标准的解释方式来写 font-family,但是在 font-size 上做些手脚,只用 12px, 14px, 16px 等稳扎稳打的字体大小。这样做最大的好处是能优先用最合适的字体显示英文字符。至于中文字符,XP的宋体也好,Vista的雅黑也好,OS的新宋体也好,在上面几个字体大小下显示的都不算难看。何况中文字体的选择范围本来就比较小,无外乎也就是那几个系统默认字体,因此自然也凑合。个人比较倾向使用这种方案。

 

至于具体选用哪种方案,还需要大家根据实际情况斟酌而定。

 

常用西文字体介绍

Tahoma 16px  Tahoma 14px  Tahoma 12px

Tahoma是我本人比较喜欢的一种非衬线字体。首先几乎所有的系统都默认安装了这个字体,所以不会存在兼容性问题,其次,这个字体也比较均衡,显示段落也不错。

 

Verdana 16px  Verdana 14px  Verdana 12px

说老实话,Verdana太宽了,不适合中英文混排。很多时候Verdana的一个字母都要比同样size的中文字符宽了。国外设计师喜欢用Verdana, 很多时候是因为Verdana 11px以下的小字效果的确十分理想,但是国内很多设计师想也不想就照搬过来,并用在12px 乃至14px的布局上,导致本来就局促的空间更显紧张,所以不推荐作为font-family 打头阵的字体。

如果要使用Verdana字体的话,就一定要考虑它和一般系统default的sans-serif字体之间的大小差距。不论和Helvetica 或者Arial 比起来,Verdana都大得多了。不过好在几乎所有的系统也都会默认安装这个字体……

 

Trebuchet MS 16px  Trebuchet MS 14px  Trebuchet MS 12px

Trebuchet MS 是个很多人都会忽视的字体。其实我个人也比较欣赏这个字体的。与其使用Verdana, 还不如用这个线条更圆润的的字体来替代。对各种操作系统也有很好的支持。

缺点是和Verdana一样,因为过宽,而不适合用在中英文混排。也要注意和default sans-serif font 宽度差距的问题。

因为考虑到有些Linux 系统可能不会安装这个字体,所以如果要用在一个font-family的开头话,可以使用Verdana 做后续字体。

 

Arial 16px  Arial 14px  Arial 12px

Windows 操作系统的默认sans-serif 字体。没啥好说的,永远都不会用到的默认字体。

 

Helvetica 16px  Helvetica 14px  Helvetica 12px

为啥同样是默认字体,Helvetica 就这么典雅呢?  哪怕就是用在font-family的开头也是能独挡一面的啦。

另外,这里有个 Helvetica 和 Arial 打架的flash游戏~ 像超级玛利一样踩 Arial 字符就可以了。顺便没有 Helvetica 字体的人可以看一下两个字体的具体区别~ 茶~

 

Georgia 16px  Georgia 14px  Georgia 12px

我最喜欢用的 serif 字体。不仅很适合做正文,也适合做标题。尤其是意大利体的 Georgia Italic 更是魅力难挡。缺点仍旧是不适宜和汉字混排,因为Georgia的衬线哪怕对于宋体来说也太重了,所以看上去硬邦邦的……

 

Times New Roman 16px  Times New Roman 14px  Times New Roman 12px

Windows 的默认serif 字体。没啥好说的,西文字体的元老了。很多字体,比如大家都熟悉的Courier New都是从Times New Roman派生出来的。

不过现在印刷业都很少用这个字体了,更多的是在用它的后代——Times Europa 和 Times Europa Office。

在具体的网页字体应用上,要注意同样字号的Times New Roman比普通字体小的多,所以一定要考虑进字体大小的变化

 

Courier New 16px  Courier New 14px  Courier New 12px

常用的等宽字体之一。其实等宽字体的选择比较小啦,所以基本上要兼容所有系统,也就只能选这个字体了。

不过还好,等宽字体通常都是在写代码的时候有用,所以只要等宽就没什么大问题。类似于 Lucida Sans Typewriter, Lucida Console, Monaco 之类的字体也都很好用。

- 综上所述,总结几套实用而简单的font-family

font-family: Tahoma, Helvetica, Arial, sans-serif;

Tahoma 系的中性字体。推荐使用在13px以上的环境。

 

font-family: Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;

Verdana 系的宽扁字体。推荐在11px以下环境使用。

 

font-family: Geogia, Times New Roman, Times, serif;

衬线字体的不二之选。

 

font-family: Lucida Console, Monaco, Courier New, mono, monospace;

一系列等宽字体。写代码很好用。另外,如果觉得Lucida Console太宽的话,可以换成比较窄的Lucida Sans Typewriter。话说老赵blog上的代码块使用的就是Lucida Sans Typewriter 哟~

- 你知道吗?

  • 字体的别名系统中的一个字体是允许有多种别名形式存在的。比如,在windows 下,Georgia 也可以用 Georgia MS 来命名,它们其实是同一种字体。宋体的正式名称是SimSon,而“宋体”只是它的别名。按照规范,浏览器应该能自动识别字体的别名,并映射到正确的字体文件。比如,font-famliy: SimSon 和 font-family: "宋体" 应该具有等价的效果。可惜,似乎很多浏览器都不能正确执行前一条定义……
  • 什么时候在字体名称前面加引号大家来看这个字体样式定义:
    font-family: Times New Roman, 宋体, serif;

    很多人都会说,这个样式写法是错的,因为 Times New Roman 和宋体都应该用引号括起来,像下面这样:

    font-family: "Times New Roman", "宋体", serif;

    实际上呢,上面两种写法都是对的。和很多人想象中的不一样,字体名称外面的引号其实并非必须的。那么加引号和不加引号有什么区别呢?

    其实最大的不同在于对字体名称中空白字符(如空格、制表符)的解释。

    不加引号的时候,浏览器对于字体名称中空白字符的解释应该和XML中一样,即忽略字体名称左右的空白字符,并且单词中间的空白字符被解释为一个空格。比如 font-family:         Times       New  Roman                , serif; 会被解释成 font-family: Times New Roman, serif;

    加引号的时候,浏览器必须保留引号内所有的空白字符。如果写成 font-family: "Times       New Roman"; 那么浏览器不会显示 Times New Roman 字体,而是搜索一个叫做“Times       New Roman”的字体。

    至于“宋体”这样的字体名称,因为中间没有空白字符,因此完全没有必要加引号。但是考虑到并非左右的操作系统都有汉字支持,并且并非所有的程序员都会注意css文件的正确编码问题,所有保险起见,一般会加上引号。当然,解决这种问题的最好方法是使用别名。比如宋体,其实应该写成SimSon,这样哪怕浏览者的系统不支持中文,并且这个css文件被错误的编码成了GB2132也没问题,浏览器还是知道这是宋体,并且做出正确的字体搜索。可惜,不是所有浏览器都支持就是了……

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值