网页中选取的字体介绍,网页字体相关
分类:前端技术

谈谈网页设计中的字体应用(4):实战应用篇·下

2015/03/30 · CSS, HTML5 · 字体

原文出处: 棕熊的博客   

Yoho, 大家好,又是我哟~

首先抱歉让大家等了这么多时间。最近实在比较繁忙啦。不过我还是会尽量抽空出来给大家讲点有的没的,欢迎大家继续关注哦。

上次我讲了在实际应用font-family时会遇到的浏览器兼容性问题。这次我 要从操作系统方面来讲如何安排字体族。另外,由于中文字体的选择范围实在太小,所以本章中设计的内容主要以西文字体为主,比较适合上一章中的“方案二”。

web前端开发外包,最重要的是什么?我个人认为无非两点——标准和兼容性,做web前端开发不得不知道的事——这几款字体你可以在网页web中随意的引用,因为这几款字体都是微软自带字体,无需第三方加载字体文件,可直接引用,兼容性好。当然MAC系统除外。

serif:字体有装饰,粗细不同。比较常见的衬线字体有:Georgia, Garamond, Times New Roman, 中文的宋体等等。

字体的选择,是网页开发的关键因素之一。

– 不同操作系统的常用字体

如何让你的字体在任何系统,任何电脑上都看起来一致?

原则很简单。尽可能使用所有操作系统都存在的字体。虽然听起来比较简单,但是其实还是很tricky的一件事情。为此,你首先需要了解常用的操作系统的字体。

下面我会列出一些除了windows以外的常用操作的默认字体。windows么……想来大家应该已经很熟悉了

1,  Arial

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

合适的字体,对网页的美观度(或可读性)有着举足轻重的影响。

– Mac OS X 中的常用字体

一个典型安装的 Mac OS X 10.4 会包含以下常用西文字体(某些非常用字体就不列出了):

sans-serif serif monospace
Helvetica Times Courier
Arial Times New Roman Courier New
Arial Narrow Georgia
Arial Black
Comic Sans MS
Gill Sans
Impact
Trebuchet MS
Verdana
Lucida Grande

微软公司的网页核心字体之一,最常用的sans-serif字体,当字号很小时不容易阅读。但是,大写的“I”和小写的“l”是无法区别的,你可以考虑用Tahoma字体来替代。

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

但是,相比英文字体,中文字体的网页开发有着极大的局限性。因为,一套中文字体最少也要有几千个字符,体积为几个MB;单单为了浏览网页,开发者不可能让用户去下载字体,只能依靠操作系统的预装字体。(*注:确实有网站提供中文字体的web服务,从技术角度,我不推荐这样做。)

– 典型的 Linux 字体

典型的Linux只有kernel,所以字体要自己安装

既然这样,自然无法正确预测使用Linux的用户装了啥字体。不过好在大家都会装一些常用的字体,因此不会有什么大问题。

 

(苹果系统没有这种字体,但有一种对应于Arial的字体叫Helvetica,它是MAC机上与Arial 字体最相似的WEB字体,是别一种非衬线字体.它是一种性能优良的打印字体,但在屏幕上表现不是很好。)

我们推荐常用字体有:

不同的操作系统、不同的版本预装不同的字体(因为版权),几乎没有交集。因此,大多数开发者索性忽略中文字体,让操作系统自行渲染,或者用图片呈现字体效果。

– 比较各个操作系统的字体,我们会发现——

其实,windows 常用的字体其它操作系统都有,甚至很多人认为windows only 的 Arial 字体也不例外~

不少设计师都认为 Arial 是个不典雅的字体,所以希望在 Mac 上能用更经典的 Helvetica 字体来代替,于是产生了这种代码:

CSS

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

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

但是因为Mac OS 其实也有Arial 字体,所以永远都只会显示Arial

其实这种问题,只要稍加修改就OK了啦:

CSS

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

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

但是事情往往不是这么简单的。比如上面的Mac OS X字体表中,由个 Lucida Grande 字体。照理说这个字体是Mac only的,所以大家理应可以放心的这么写:

CSS

font-family: "Lucida Grande", Arial, sans-serif;

1
font-family: "Lucida Grande", Arial, sans-serif;

那么Mac用户可以看到Lucida Grande, 而PC用户可以看到Arial字体。多好的应用典范。

但是实际上呢,不少PC用户居然看到了乱码,而不是 Arial 字体

怎么回事呢?因为市面上有不少字体下载网站,而上面就有那个Lucida Grande下载。可惜这个广为流传的 Lucida Grande 是个rip版,而且rip的时候有缺陷,导致所有换行字符都会显示成一个乱码……

——囧大了

不要说这种事情只会在乱装英文字体的用户上发生哟。能在XP上显示微软雅黑的,不都是rip版的嘛——那个网上广为流传的版本,也存在着类似缺陷,只不过不至于严重到产生乱码而已。所以在选择字体时需要注意一下。

CSS写法:font-family: Arial, Helvetica, sans-serif;

宋体、黑体、微软雅黑、Arial, Helvetica, sans-serif此4种字体。

下面是目前中文字体的最佳实践,主要参考了Kendra Schaefer的文章。

– 常用西文字体介绍

pc28.am神测网 1

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

pc28.am神测网 2

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

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

pc28.am神测网 3

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

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

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

pc28.am神测网 4

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

pc28.am神测网 5

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

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

pc28.am神测网 6

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

pc28.am神测网 7

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

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

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

pc28.am神测网 8

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

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

2, Arial Black

常用字体样式设置font-style: italic

一、操作系统的预装字体

pc28.am神测网,操作系统决定了开发者可以使用的字体。所以,第一步,我们必须了解操作系统到底提供哪些字体。

中文名

英文名

Unicode

Unicode 2

Mac OS

华文细黑

STHeiti Light [STXihei]

534E65877EC69ED1

华文细黑

华文黑体

STHeiti

534E65879ED14F53

华文黑体

华文楷体

STKaiti

534E658769774F53

华文楷体

华文宋体

STSong

534E65875B8B4F53

华文宋体

华文仿宋

STFangsong

534E65874EFF5B8B

华文仿宋

丽黑 Pro

LiHei Pro Medium

4E3D9ED1 Pro

丽黑 Pro

丽宋 Pro

LiSong Pro Light

4E3D5B8B Pro

丽宋 Pro

标楷体

BiauKai

680769774F53

标楷体

苹果丽中黑

Apple LiGothic Medium

82F9679C4E3D4E2D9ED1

苹果丽中黑

苹果丽细宋

Apple LiSung Light

82F9679C4E3D7EC65B8B

苹果丽细宋

Windows

新细明体

PMingLiU

65B07EC6660E4F53

新细明体

细明体

MingLiU

7EC6660E4F53

细明体

标楷体

DFKai-SB

680769774F53

标楷体

黑体

SimHei

9ED14F53

黑体

宋体

SimSun

5B8B4F53

宋体

新宋体

NSimSun

65B05B8B4F53

新宋体

仿宋

FangSong

4EFF5B8B

仿宋

楷体

KaiTi

69774F53

楷体

仿宋_GB2312

FangSong_GB2312

4EFF5B8B_GB2312

仿宋_GB2312

楷体_GB2312

KaiTi_GB2312

69774F53_GB2312

楷体_GB2312

微软正黑体

Microsoft JhengHei

5FAEx8F6F6B639ED14F53

微软正黑体

微软雅黑

Microsoft YaHei

5FAE8F6F96C59ED1

微软雅黑

Office

隶书

LiSu

96B64E66

隶书

幼圆

YouYuan

5E7C5706

幼圆

华文细黑

STXihei

534E65877EC69ED1

华文细黑

华文楷体

STKaiti

534E658769774F53

华文楷体

华文宋体

STSong

534E65875B8B4F53

华文宋体

华文中宋

STZhongsong

534E65874E2D5B8B

华文中宋

华文仿宋

STFangsong

534E65874EFF5B8B

华文仿宋

方正舒体

FZShuTi

65B96B6382124F53

方正舒体

方正姚体

FZYaoti

65B96B6359DA4F53

方正姚体

华文彩云

STCaiyun

534E65875F694E91

华文彩云

华文琥珀

STHupo

534E6587742573C0

华文琥珀

华文隶书

STLiti

534E658796B64E66

华文隶书

华文行楷

STXingkai

534E6587884C6977

华文行楷

华文新魏

STXinwei

534E658765B09B4F

华文新魏

苹果电脑中的字体: 

  • 华文细黑:STHeiti Light [STXihei] 
  • 华文黑体:STHeiti 
  • 华文楷体:STKaiti 
  • 华文宋体:STSong 
  • 华文仿宋:STFangsong 
  • 丽黑 Pro:LiHei Pro Medium 
  • 丽宋 Pro:LiSong Pro Light 
  • 标楷体:BiauKai 
  • 苹果丽中黑:Apple LiGothic Medium 
  • 苹果丽细宋:Apple LiSung Light 

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

CSS

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

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

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

CSS

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

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

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

CSS

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

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

衬线字体的不二之选。

CSS

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

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

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

CSS写法:font-family: ‘Arial Black’, Gadget, sans-serif;

兼容各大浏览器

二、font-family命令

浏览器中展示网页文字内容时,文字字体都会按照设计师在css中定义的字体族的顺序来进行显示。什么是字体族?字体族就是你在css代码中看到“font-family”的代码内的一类字体名称,例如下面这行代码:


font-family: Georgia, "Times New Roman", "Microsoft YaHei", "微软雅黑", STXihei, "华文细黑", serif;  

CSS的font-family命令,指定了网页元素所使用的字体。它的规则有三条。

(1)优先使用排在前面的字体。

(2)如果找不到该种字体,或者该种字体不包括所要渲染的文字,则使用下一种字体。

(3)如果所列出的字体,都无法满足需要,则让操作系统自行决定使用哪种字体。

根据这些规则,font-family应该优先指定英文字体,然后再指定中文字体。否则,中文字体所包含的英文字母,会取代英文字体,这往往很丑陋。

pc28.am神测网 9

上面图片中,红框内的英文字母,左边采用英文字体渲染,右边采用中文字体渲染,哪一种效果比较好,一目了然。

为了保证兼容性,中文字体的中文名称和英文名称,应该都写入font-family。比如,”微软雅黑”的英文名称是Microsoft YaHei。

此外,中文字体的中文名称,以及由多个单词组成的英文名称,应该放在双引号内。

– 你知道吗?

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

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

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6b9b63bc5650953555-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6b9b63bc5650953555-1" class="crayon-line">
font-family: Times New Roman, 宋体, serif;
</div>
</div></td>
</tr>
</tbody>
</table>

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



CSS

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

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6b9b63bc8049008790-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6b9b63bc8049008790-1" class="crayon-line">
font-family: &quot;Times New Roman&quot;, &quot;宋体&quot;, serif;
</div>
</div></td>
</tr>
</tbody>
</table>

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

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

不加引号的时候,浏览器对于字体名称中空白字符的解释应该和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也没问题,浏览器还是知道这是宋体,并且做出正确的字体搜索。可惜,不是所有浏览器都支持就是了……

网页设计中的字体应用这个专题就讲到这里了,希望对大家有所帮助。下次我打算讲一下在项目中如何应用样式表管理,适合稍微有些样式表基础,并且正在参与、或者有意参与大型开发项目的朋友们听哦~ 其中还可能穿插一些小文章,解释一些实际工作中大家遇到的容易误解的地方。不过最近偶会比较忙一些,所以可能会花些时间来写,请大家耐心等待啦。

那么,大家下次见了哟~

赞 1 收藏 评论

pc28.am神测网 10

3, Arial Narrow

normal : 正常的字体(默认字体样式,可用于去掉html i斜体标签默认斜体样式)

三、 Windows平台和Mac平台

由于Windows和Mac的中文字体没有交叉,所以应该同时为两个平台指定字体。

常见的做法是,Windows平台指定”微软雅黑”(Microsoft YaHei),Mac平台指定”华文细黑”(STXihei)。

CSS写法:font-family: ‘Arial Narrow’, sans-serif;

italic : 斜体。对于没有斜体变量的特殊字体,将应用oblique

四、网页常用字体分类

网页常用字体通常分为5类:serif(衬线)、sans-serif(无衬线)、monospace(等宽)、fantasy(梦幻)、cuisive(草体),这些通用的名称允许用户代理从相应集合中选择一款字体。

  • serif 字体在字符笔画末端有叫做衬线的小细节,这些细节在大写字母中特别明显。
  • sans-serif 字体在字符笔画末端没有任何细节,与serif字体相比,他们的外形更简单。
  • monospace 字体,每个字母的宽度相等,通常用于计算机相关书籍中排版代码块。
  • fantasy 和 cuisive 字体在浏览器中不常用,在各个浏览器中有明显的差异。

所谓”衬线体”(Serif),指的是笔画的末端带有衬线的字体。

Sans-serif:

Helvetica: 被评为设计师最爱的字体,Realist风格,简洁现代的线条,非常受到追捧。在Mac下面被认为是最佳的网页字体,在Windows下由于Hinting的原因显示很糟糕。
Arial: Helvetica的「克隆」,和Helvetica非常像,细节上比如R和G有小小差别。如果字号太小,文字太多,看起来会有些累眼。Win和Mac显示都正常
Lucida Family: Lucida Grande是Mac OS UI的标准字体,属于humanist风格,稍微活泼一点。Mac下的显示要比Win下好。
Verdana: 专门为了屏显而设计的字体,humanist风格,在小字号下仍可以清楚显示,但是字体细节缺失严重,最好别做标题。
Tahoma: 也是humanist风格,字体和Verdana有点像,但是略窄一些,counter略小,曾经是Windows的标准字体,Mac 10.5之后默认也有安装。
Trebuchet MS: 为微软设计的一个humanist风格字体,个人觉得个性太过突出,用得不好会不搭。

Serif:

Georgia: 基本上适合正文屏显的衬线字体,非Georgia莫属了。笔画粗重,衬线明线,轮廓较大,小字体显示也很清晰,同时细节还算OK。
Times: Times是为了报纸而设计的,特点是可以在有限的空间塞进去更多的文字,笔画较弱,小字号正文屏显看起来累眼。曾经Engadget改版的时候用了Times作为正文,被骂得很惨之后换成了Georgia。

就像英文字体一样,中文字体也可以分成”衬线体”和”无衬线体”(San-serif)。比如,对于繁体字来说,微软正黑(Microsoft JhengHei)是无衬线体,新细明体(PMingLiU)是衬线体。

pc28.am神测网 11

对于简体字来说,微软雅黑(Microsoft yahei)是无衬线体,宋体(SimSun)是衬线体。

pc28.am神测网 12

一般来说,衬线体装饰性强,往往用于标题;无衬线体清晰度好,往往用于正文。

4, Verdana

oblique : 倾斜的字体

五、网页设计常用WEB安全字体

1,  Arial

微软公司的网页核心字体之一,最常用的sans serif字体,当字号很小时不容易阅读。但是,大写的“I”和小写的“l”是无法区别的,你可以考虑用Tahoma字体来替代。
(苹果系统没有这种字体,但有一种对应于Arial的字体叫Helvetica,它是MAC机上与Arial 字体最相似的WEB字体,是别一种非衬线字体.它是一种性能优良的打印字体,但在屏幕上表现不是很好,说道Helvetica字体,昨天发现了很多有意思的站点,主要是纪念Helvetica字体诞生50年而设的。)

pc28.am神测网 13

CSS写法:font-family: Arial, Helvetica, sans-serif;

2, Arial Black

pc28.am神测网 14

CSS写法:font-family: ‘Arial Black’, Gadget, sans-serif;

3, Arial Narrow

pc28.am神测网 15

CSS写法:font-family: ‘Arial Narrow’, sans-serif;

4, Verdana

微软公司的网页核心字体之一,微软公司专门为屏幕显示而开发的。应用广泛。易于阅读。是显示器中最清晰的字体,即使字号很小,也很容易阅读。半肥猫比较喜欢采用10PX的Verdana来做英文正文字体,也推荐大家使用,但字号最好介于10~14像素之间,超出这个范围就不好看了。

pc28.am神测网 16

CSS写法:font-family: Verdana, Geneva, sans-serif;

5,  Georgia
微软公司的网页核心字体之一,可用性好。可读性比Times New Roman强。是网站设计中,浏览效果最好的serif字体,因为它是专为网上阅读设计的。)

pc28.am神测网 17

CSS写法:font-family: Georgia, serif;

6,  Times New Roman
微软公司的网页核心字体之一,可能是最常用的serif字体,是网站浏览器默认的字体,12pt以上的字体容易阅读,但小字号的字体易读性差。(苹果系统没有这个字体,有一个对应于Times New Roman的字体叫Times)

pc28.am神测网 18

CSS写法:font-family: 'Times New Roman', Times, serif;

7, Trebuchet MS 微软公司的网页核心字体之一,与Arial相似,半肥猫觉得:Trebuchet MS比Arial看起来优雅、古典一点。可以用来做标题,但小字号阅读起来会很困难(低于13PIX阅读起来就很累了,不太推荐用来做正文字体)。在苹果系统上也可以用Helvetica做替代。

pc28.am神测网 19

CSS写法:font-family: 'Trebuchet MS', Helvetica, sans-serif;

8 , Courier New 微软公司的网页核心字体之一,老式打印机字体,有一种独特的机械工整感觉。呈现计算机编码时,还会用到这种字体。12 pt的Courier New字体曾是美国国务院的公文标准字体,但于2004年1月停用,改使用14 pt的Times New Roman,因为其具“现代性”和“易读性”。

pc28.am神测网 20

CSS写法:font-family: 'Courier New', Courier, monospace;

9,  Impact
微软公司的网页核心字体之一,Impact是1965年发表的一个无衬线字体,其特粗的笔画、紧缩的间距。半肥猫觉得:字体较为粗犷,适合使用在标题上,而不常用在内文。

pc28.am神测网 21

CSS写法:font-family: Impact, Charcoal, sans-serif;

10,  Comic Sans MS
微软公司的网页核心字体之一,手写体。这是一种争议很大的字体,讲实话,半肥猫也不喜欢这个字体,一点美感都没有,不过在一大堆规规矩矩的字体里面,有这么一个随意性比较的字体,可以变换一下口味,也算不错吧,建议不要用在正规的金融、政府、商业机构站点。

pc28.am神测网 22

CSS写法:font-family: 'Comic Sans MS', cursive;

11,  Tahoma Tahoma是一个十分常见的无衬线字体,Tahoma和Verdana师出同为名设计师马修·卡特的作品,由微软在1999年推出,被采用为Windows 2000、Windows XP、Windows Server 2003等系统的默认字型。半肥猫觉得:它的字体结构和Verdana很相似,其字符间距较小,用来作为标题,效果好过Arial(Tahoma的大写I 和小写l比Arial容易识别),但如果作为正文,他的字号不能小于13PIX,否则很多笔画粘连到一起,不利于阅读。

pc28.am神测网 23

CSS写法:font-family: Tahoma, Geneva, sans-serif;

12,  Courier Courier是一个等宽字体的粗衬线字体,主要是依据打字机所打印出来的字型来设计。原来Courier New的字体是IBM公司在1950年代设计给打印机使用的字体,后来这个字型成为整个打字机制造业的标准。Courier New是Courier的变体,比Courier更具机械味道。

pc28.am神测网 24

CSS写法:font-family: Courier, monospace;

13,  Lucida Sans Unicode
是一种OpenType型的无衬线字体 。1993年制作并随微软公司的Windows NT 3.1操作系统发布。有较大的x字高,具有很好的可读性,被广泛用于显示、出版等各种用途。
它支持Unicode2.0版本的基本字符,包括拉丁字母,希腊字母,西里尔字母,希伯来字母,以及国际音标字符。该字体是首个 Unicode代码的字体, 该字体从Windows 98开始一直作为系统预装字体发行。
后来发布的 Lucida Grande字体作为苹果公司Mac OS X系统的默认字体发布。
CSS写法:font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;

14, Lucida Console
同Lucida Sans Unicode类似。

pc28.am神测网 25

CSS写法:font-family: 'Lucida Console', Monaco, monospace;

15,  Garamond
Garamond(加拉蒙德)是一类西文衬线字体的总称,自16世纪40年代开始至今,有很多家公司和很多设计师参与到Garamond字体设计,如: Adobe Garamond, Monotype Garamond, Sioncini Garamond,和 Stempel Garamond等等。半肥猫觉得:字体给人端庄典雅,有些古典的感觉,在博物馆和历史性悠久的项目中使用,应该可以获得不错的效果。

pc28.am神测网 26

CSS写法:font-family: Garamond, serif;

16 ,  MS Sans Serif
微软系统自带字体。屏幕显示的像素字体。非衬线字体。

pc28.am神测网 27

CSS写法:font-family: 'MS Sans Serif', Geneva, sans-serif;
17 ,  MS Serif
微软系统自带字体。屏幕显示的像素字体。衬线字体。
CSS写法:font-family: 'MS Serif', 'New York', sans-serif;

18, Palatino Linotype

pc28.am神测网 28

CSS写法:font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;

19, Symbol

pc28.am神测网 29

CSS写法:font-family: Symbol, sans-serif;

20, Bookman Old Style

pc28.am神测网 30

CSS写法:font-family: 'Bookman Old Style', serif;

微软公司的网页核心字体之一,微软公司专门为屏幕显示而开发的。应用广泛。易于阅读。是显示器中最清晰的字体,即使字号很小,也很容易阅读。但字号最好介于10~14像素之间,超出这个范围就不好看了。

适用用途:

六、几种常见中文字体

(1)宋体(SimSun)

宋体是Win最常见的字体,小字体点阵,大字体TrueType,但是大字体并不好看,所以最好别做标题。如果没有指定字体,操作系统往往选择它来渲染。很多人认为,这种字体并不美观。

pc28.am神测网 31

(2)微软雅黑(Microsoft YaHei)

Vista之后新引入的字体,打开Cleartype之后显示效果不错,不开Cleartype发虚。美观度和清晰度都较好,可以作为网页的首选字体。它在Mac平台的对应字体是华文细黑(STXihei)。

但是,Windows XP没有预装这种字体,这时可以选择黑体(Simhei)替代。不过,黑体比较粗,不应用于字号较小的文字。

pc28.am神测网 32

(3)仿宋(FangSong)

这种字体是衬线体,比宋体的装饰性更强。如果字号太小,会影响清晰度,所以只有在字号大于14px的情况下,才可以考虑这种字体。

它在Mac平台的对应字体是”华文仿宋”(STFangsong)。

pc28.am神测网 33

(4)楷体(KaiTi)

楷体也是衬线体,装饰性与仿宋体接近,但是宽度更大,笔画更清楚一些。这种字体也不应该在小于14px的情况下使用。

它在Mac平台的对应字体是”华文楷体”(STKaiti)。

pc28.am神测网 34

1.在chrome上显示的结果                              **

pc28.am神测网 35   

**2.在ie8上显示的结果 **

 pc28.am神测网 36     

**3.在firefox上显示的结果**

pc28.am神测网 37

5.在此次测试中发现

android设备中各个浏览器都很不给力(ios的还没有测试,我想肯定也好不到哪去吧),android手机中各个浏览器支持的常用字体只有三种:

  • sans-serif(无衬线)类 : Arial;   //只要设置成sans-serif类,不管什么字体,都一个样子。
  • serif(衬线)类 :Georgia;  //只要设置成serif类,不管什么字体,都一个样子。
  • monospace(等宽)类  //只要设置成monospace类,不管什么字体,都一个样子。

在CSS文件中,我们常看到有些字体名称变成了乱码,这是由于CSS文件基本都是UTF-8的编码模式,编写者将中文字体的名字直接写成了中文,并且再上传或者拷贝复制的时候无意间变成了乱码。 所以我们可以把中文字体的名称用相应的Unicode编码来代替,这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题。比如中文字体“宋体”经过Unicode编码后为“5b8b4f53″,在CSS中就可以这样写:font-family:’ 5b8b4f53’;

我们常用中文字体的英文名称对照表如下: Windows自带的字体:

如果在你“DIV CSS”的过程中,还需要用到一些表中没有的字体的话,可以借助Firefox的插件Firebug来查询所需中文字体对应的 Unicode编码,方法很简单,就是打开Firefox,然后打开Firebug,在“控制台”里底部“>>>”的后面像这样输入 “escape(‘黑体’)”,然后会显示一个错误信息,*** is not defined 前面的部分就是中文字体“黑体”对应的Unicode编码“9ED14F53”,注意命令符里的符号都是英文符号,否则可能会出错。

另外,在设置字体时候最好把英文字体写在前面,不然可能网页里所有的英文字体和数字都变成“宋体”或者别的字体去了,那样看起来比较不美观。

CSS写法:font-family: Verdana, Geneva, sans-serif;

通常文章的内文、正文使用的是易读性较佳的Serif字体,这可增加易读性,而且长时间阅读下因为会以word为单位来阅读,较不容易疲倦。而标题、表格内用字则採用较醒目的Sans Serif字体,它需要显着、醒目,但不必长时间盯着这些字来阅读。

七、特殊字体应用方案

目前方案无非三种: 

  1. 客户打开网页的时候,提示客户安装该字体。
  2. 制作图片嵌入网页。
  3. 把字体嵌入到网页中(通过上传字体文件到指定目录,让CSS引用显示)。

第一种方案明显存在弊端,用脚本程序去识别客户端是否含有该字体,加重程序的负载量。而且严重影响用户的体验。效果最次!

第二种方案生成图片,网页加载慢,不利于百度收录,效果差!

第三种方案流量小加载速度快,效果最好!

 

   第三种方案就是指网络字体(web font,也被称为“网页内嵌字体”或“网页外调字体”),通过上传字体文件到指定目录,然后在CSS中用规定格式进行引用就可以使字体效果跃上你的页面了,使网页用字不再受浏览客户端的影响。

5,  Georgia

像宣传品、海报类,为求醒目,它的短篇的段落也会採用Sans Serif字体。但在书籍、报刊杂志,正文有相当篇幅的情形则应採用Serif字体来减轻读者阅读上的负担。在Web设计及浏览器设置中也应遵循此原则为是。

八、一些建议

最好是使用大多数人的机器上可能有的常见的truetype字体。
Arial、Times Roman、Courier、Verdana和Century Gothic是常见的字体,中文里面Windows自带宋体、黑体及楷体。
如果你使用不常见的字体,不要忘记为没有此字体的浏览器指定替代的字体。
通过css设置font-family来制定字体集,浏览器可以顺序查找使用你制定的一系列字体,让你的页面看起来还不错。
・装饰性字体组好只用于标题。然后用css的font-family指定缺省字体。
・不要过分地使用字体,在同一页面中不要使用太多不同的字体。
通常使用两种字体就足够了:一种用于标题,一种由于文本。
某些字体组合常常无法工作。例如,不要再同一页面中使用script和斜体字体,不要在同一页面中使用一种以上的装饰性字体。
・尝试使用相同字型的不同浓淡度使页面更有趣。
如果你的页面相当乏味,没有图像,那么尝试设置促体的浓淡度(通过css的font-weight特性),这会使页面更生动。使用不用的浓淡度不仅可以使页面更吸引人,它还是组织信息的最有效的方法之一。
・不要在同一页面中放两种sans serif字体,除非你确实知道在做什么。
如果你要在同一页面中使用两种字体,它们应该来自两种不同的字型类别。
・不同的操作系统及浏览器中pt字会不一样大。
pt(磅)最早是用于印刷的字号,在windows和mac os里面,相同的pt值会对应不同的px(像素)值。唯一可靠的单位,就是px。
・设置字号的时候,要考虑好来你的网站的客人会是什么样的人?
如果你设置了固定的字号,比如12px,那么,对于普通浏览者来说,这是没什么问题的,但是如果你的网站的浏览者包括老人和视力有问题的人群,那么这个尺寸就太小了,最好提供个他们可以选择页面字体的权利。

Arial、Times Roman、Courier、Verdana和Century Gothic是常见的字体,中文里面Windows自带宋体、黑体及楷体。如果你使用不常见的字体,不要忘记为没有此字体的浏览器指定替代的字体。

通常内容应用的字体,font-family:宋体,微软雅黑,Arial,Verdana,arial,serif。通常标题应用的字体,font-family:font-family:宋体,微软雅黑,Arial,只是字号的大小不一样。通常的字体大小,font-size:12px或14px。让网页显示微软雅黑效果通常这样写CSS代码font-family:微软雅黑,宋体。这样网站首选微软雅黑,如果用户未安装微软雅黑字体,就默认显示宋体。

在新版本的CSS3,可以使用 @font-face 调用一些其他的字体库,弊端是,用户在访问的时候要去下载这个文件,所以会影响整个网站的效率。

Arial,Helvetica,San-serif 这个组合适配性是最好的,也是最保险的. 

font-family: arial,helvetica,sans-serif;

(完)

微软公司的网页核心字体之一,可用性好。可读性比Times New Roman强。是网站设计中,浏览效果最好的serif字体,因为它是专为网上阅读设计的。)

其他的通用字体族

CSS写法:font-family: Georgia, serif;

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

6,  Times New Roman

Monospace等宽字体:

微软公司的网页核心字体之一,可能是最常用的serif字体,是网站浏览器默认的字体,12pt以上的字体容易阅读,但小字号的字体易读性差。(苹果系统没有这个字体,有一个对应于Times New Roman的字体叫Times)

所谓的等宽字体,是指每个字符宽度都一致的字体。一个著名的例子就是 Courier New 字体。因为字符宽度一致,所以特别容易对齐,能快速精确的定位到某行某列,因此经常用来显示代码。

CSS写法:font-family: 'Times New Roman', Times, serif;

Cursive书写体:相当于印刷学中的手写体。中文的华文行草就是这样的一个字体。

7, Trebuchet MS

网页设计中的默认字体:字体大小(12px)、行高(18px)

微软公司的网页核心字体之一,与Arial相似。Trebuchet MS比Arial看起来优雅、古典一点。可以用来做标题,但小字号阅读起来会很困难(低于13PIX阅读起来就很累了,不太推荐用来做正文字体)。在苹果系统上也可以用Helvetica做替代。

font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif;

CSS写法:font-family: 'Trebuchet MS', Helvetica, sans-serif;

①font-family默认采用Tahoma. Tahoma是英文Windows操作系统的默认字体,这个字体比较均衡,显示中英文混排很不错,是经久耐看的一款字体。

8 , Courier New

②Mac OS X系统有一款比Tahoma更典雅的系统默认字体:Helvetica,非Mac系统的Helvetica字体都是Rip版。

微软公司的网页核心字体之一,老式打印机字体,有一种独特的机械工整感觉。呈现计算机编码时,还会用到这种字体。12 pt的Courier New字体曾是美国国务院的公文标准字体,但于2004年1月停用,改使用14 pt的Times New Roman,因为其具“现代性”和“易读性”。

③Arial是早期Windows英文系统的默认字体,XP和Vista上都是Tahoma。

CSS写法:font-family: 'Courier New', Courier, monospace;

④最后的sans-serif是针对强悍的Linux DIY族。Linux默认只有kernel, 字体完全由用户自定义,针对这部分用户,sans-serif可能能派上用场。

9,  Impact

⑤最后,无论在XP还是Vista下,不指定网页的中文字体时,默认就是宋体。因此font-family里的’宋体’是多余的,可以省去。

微软公司的网页核心字体之一,Impact是1965年发表的一个无衬线字体,其特粗的笔画、紧缩的间距。字体较为粗犷,适合使用在标题上,而不常用在内文。

来源

CSS写法:font-family: Impact, Charcoal, sans-serif;

10,  Comic Sans MS

微软公司的网页核心字体之一,手写体。这是一种争议很大的字体,建议不要用在正规的金融、政府、商业机构站点。

CSS写法:font-family: 'Comic Sans MS', cursive;

11,  Tahoma

Tahoma是一个十分常见的无衬线字体,Tahoma和Verdana师出同为名设计师马修·卡特的作品,由微软在1999年推出,被采用为Windows 2000、Windows XP、Windows Server 2003等系统的默认字型。它的字体结构和Verdana很相似,其字符间距较小,用来作为标题,效果好过Arial(Tahoma的大写I 和小写l比Arial容易识别),但如果作为正文,他的字号不能小于13PIX,否则很多笔画粘连到一起,不利于阅读。

CSS写法:font-family: Tahoma, Geneva, sans-serif;

12,  Courier

Courier是一个等宽字体的粗衬线字体,主要是依据打字机所打印出来的字型来设计。原来Courier New的字体是IBM公司在1950年代设计给打印机使用的字体,后来这个字型成为整个打字机制造业的标准。Courier New是Courier的变体,比Courier更具机械味道。

CSS写法:font-family: Courier, monospace;

13,  Lucida Sans Unicode

是一种OpenType型的无衬线字体 。1993年制作并随微软公司的Windows NT 3.1操作系统发布。有较大的x字高,具有很好的可读性,被广泛用于显示、出版等各种用途。

它支持Unicode2.0版本的基本字符,包括拉丁字母,希腊字母,西里尔字母,希伯来字母,以及国际音标字符。该字体是首个 Unicode代码的字体, 该字体从Windows 98开始一直作为系统预装字体发行。

后来发布的 Lucida Grande字体作为苹果公司Mac OS X系统的默认字体发布。

CSS写法:font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;

14, Lucida Console

同Lucida Sans Unicode类似。

CSS写法:font-family: 'Lucida Console', Monaco, monospace;

15,  Garamond

Garamond(加拉蒙德)是一类西文衬线字体的总称,自16世纪40年代开始至今,有很多家公司和很多设计师参与到Garamond字体设计,如: Adobe Garamond, Monotype Garamond, Sioncini Garamond,和 Stempel Garamond等等。字体给人端庄典雅,有些古典的感觉,在博物馆和历史性悠久的项目中使用,应该可以获得不错的效果。

CSS写法:font-family: Garamond, serif;

16 ,  MS Sans Serif

微软系统自带字体。屏幕显示的像素字体。非衬线字体。

CSS写法:font-family: 'MS Sans Serif', Geneva, sans-serif;

17 ,  MS Serif

微软系统自带字体。屏幕显示的像素字体。衬线字体。

CSS写法:font-family: 'MS Serif', 'New York', sans-serif;

18, Palatino Linotype

CSS写法:font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;

19, Symbol

CSS写法:font-family: Symbol, sans-serif;

20, Bookman Old Style

CSS写法:font-family: 'Bookman Old Style', serif;

怎么样,是不是长知识了呢,觉得有用就收藏或者转发吧。

web前端外包-切版(qieban.cn)

本文由pc28.am发布于前端技术,转载请注明出处:网页中选取的字体介绍,网页字体相关

上一篇:没有了 下一篇:没有了
猜你喜欢
热门排行
精彩图文