前端页面字体

前端网页字体的定义主要有两种方式：font-family 和 @font-face 。关于这些前端基础知识，各位UI设计师必须要了解下。

font-family

font-family属于前端css属性中最基础的一个属性，用来定义字体名称。下面是一个比较典型的例子。

font-family: Helvetica, ''PingFangSC'', 'Microsoft Yahei', '微软雅黑', Arial, sans-serif;

font-family 规定元素的字体系列，可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。

在实际的工作中，用户的电脑一般是 PC 和 Mac，但是这两个平台的屏幕材质、渲染方式都不一样，所以使用的默认字体也是不一样的。PC 默认使用微软雅黑，而 Mac 默认使用苹方。

当我们打开一个网站，浏览器会读取 font-family 中的字体名称，并去检索用户电脑系统中的字体，如果有的话就显示，没有的话检索下一个。

所以，虽然前端代码中写了微软雅黑，但仅仅是一种调用方法，你的电脑中有就显示，没有就显示字体，和版权是没有任何关系的。因为它仅仅是调用了终端用户自身系统中已经存在的字体用来屏幕输出显示，这不需要任何额外的授权许可。

以后前端再问你字体如何使用，就可以说根据Mac和PC平台不一样，调用不同的字体以便在对应平台显示最好的效果。

@font-face

@font-face 属于 css 中另一个字体调用方法。和 font-family 默认调用电脑字体不同，@font-face 是把自己定义的 Web 字体嵌入到网页中。

事实上，例如 'Microsoft Yahei', Arial, sans-serif 等字体都属于安全字体，即正常电脑都会默认安装的，所以前端可以直接调用。

但是如果网页需要使用到特殊的字体，并且不想用图片代替，就可以使用@font-face方法。比如下面的结构。

@font-face {   
    font-family: <YourWebFontName>;   
    src: <source> [<format>][,<source> [<format>]]*;   
    [font-weight: <weight>];   
    [font-style: <style>]; 
}

font-family 表示自定义的字体名称。

src 表示自定义的字体的存放路径。

font-weight 和 font-style 属于 css 字体中的两个基本属性，分别代表加粗和字体样式。

字体格式介绍

说到@font-face引入字体，就不得不提到字体的格式了。因为不同的浏览器对字体格式支持是不一致的，所以各位设计师要简单了解一下各种版本浏览器支持什么样的字体。

1、True Type Font(.ttf)格式

.ttf字体是Windows和Mac的最常见的字体，支持这种字体的浏览器有IE9+，Firefox3.5+，Chrome4+，Safari3+，Opera10+，iOS Mobile Safari4.2+

2、Open Type Font(.otf)格式

.otf字体被认为是一种原始的字体格式，其内置在TrueType的基础上，所以也提供了更多的功能,支持这种字体的浏览器有Firefox3.5+，Chrome4.0+，Safari3.1+，Opera10.0+，iOS Mobile Safari4.2+

3、Web Open Font Format(.woff)格式

.woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离,支持这种字体的浏览器有IE9+，Firefox3.5+，Chrome6+，Safari3.6+，Opera11.1+

4、Embedded Open Type(.eot)格式

.eot字体是IE专用字体，可以从TrueType创建此格式字体,支持这种字体的浏览器有IE4+

5、SVG(.svg)格式

.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有Chrome4+，Safari3.1+，Opera10.0+，iOS Mobile Safari3.2+

是不是很熟悉？看到这里，很多设计师会想到iconfont。千万不要把iconfont想成一个简单的图标素材库，它的潜力比想象的要大得多。

Iconfont本质上就是把图标转化为字体，官方的三种使用方法中（unicode引用、font-class引用、symbol引用）的unicode引用其实就是用了@font-face的方法。比如下面这个例子。

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
  url('iconfont.woff') format('woff'),
  url('iconfont.ttf') format('truetype'),
  url('iconfont.svg#iconfont') format('svg');
}

通过以上的分析，我们就可以得出结论：font-family方法是没有问题的，但是@font-face方法就会造成侵权。