首先我们的前提是针对常规正文,大篇幅文本的字体,而非标题、活动页、特效页的部分特殊字。对于前者我们是用css代码限定font-family,或者webfont解决实现;对于后者通过切图实现。
其中特别说明:Open Sans 的中文字体在 Mac 上效果不错,微软雅黑的中文字体在 Windows 上效果不错。
注意事项:特别的针对font-family说明下,font-family属性是多种字体的名称,作为一个”应变”制度,以确保浏览器/操作系统之间的最大兼容性。如果浏览器不支持的第一个字体,它尝试下一个的字体。你想要的字体类型如果浏览器找不到,它会从通用的字体类型中找到与你相似的.代码语法如下:
body{font-family:"Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;}
@font-face实现webfont(不推荐)
@font-face 介绍
@font-face是css中的一个功能模块,用于实现网页字体多样性(设计者可随意指定字体,不需要考虑浏览者电脑上是否安装)。主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体。语法具体兼容见下图(数据统计来自于can i use):Internet Explorer 9, Firefox, Opera,Chrome, 和 Safari支持@font-face 规则.但是, Internet Explorer 9 只支持 .eot 类型的字体, Firefox, Chrome, Safari, 和 Opera 支持 .ttf 与.otf 两种类型字体.注意: Internet Explorer 8 及更早IE版本不支持@font-face 规则.
@font-face文件
由于网页中使用的字体类型,也是各浏览器对字体类型有不同的支持规格。 字体格式类型主要有几个大分类:TrueType、Embedded Open Type 、OpenType、WOFF 、SVG。
TrueType(.ttf):Windows和Mac系统最常用的字体格式,其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体,这使得它们比基于矢量的字体更容易处理,保证了屏幕与打印输出的一致性。同时,这类字体和矢量字体一样可以随意缩放、旋转而不必担心会出现锯齿。
Embedded Open Type(.eot):EOT是嵌入式字体,是微软开发的技术。允许OpenType字体用@font-face嵌入到网页并下载至浏览器渲染,存储在临时安装文件夹下。
OpenType(.otf):OpenType是微软和Adobe共同开发的字体,微软的IE浏览器全部采用这种字体。致力于替代TrueType字体。
WOFF–WebOpen Font Format (.woff):WOFF(Web开发字体格式)是一种专门为了Web而设计的字体格式标准,实际上是对于TrueType/OpenType等字体格式的封装,每个字体文件中含有字体以及针对字体的元数据(Metadata),字体文件被压缩,以便于网络传输。
SVG:SVG是由W3C制定的开放标准的图形格式。SVG字体就是使用SVG技术来呈现字体,还有一种gzip压缩格式的SVG字体。