这几天设计圈都被一条字体侵权消息刷屏，一公司在没有获得字体版权的情况下使用微软雅黑做印刷品，样稿印刷厂印了5000万张已经全国商用，公司损失2860万，裁员42人，含8个主管。

现在各位设计师都知道，微软雅黑版权是属于方正的，并不能免费使用！在大家惊叹赔偿金额的时候，方正官方出来辟谣：

这次事件，方正字体给我们间接地上了一课：想安全使用我们的字体？乖乖付费吧。同时还告诉那些没有买过版权的公司：该交保护费了。目前事件已在百度热点搜索排名第三，也让中国很多非设计行业人员了解了方正。

不过在大家都在聚焦新闻本身的时候，有没有想过，什么样的字体行为会受到侵权呢？

在设计行业中，常见的微软雅黑字体侵权主要表现在线上的banner、广告、页面、电影等，线下的印刷品、户外广告、书籍等。各位设计师对这些都非常清楚：无版权，不可商用。

                                      UI前端和微软雅黑

但是在UI设计这块，我们在电脑网页中显示的微软雅黑有版权吗？公司官网显示的文章字体都是微软雅黑，这样会侵权吗？我们再回顾下微软雅黑的历史。

“微软雅黑”字体是“北大方正电子有限公司”设计开发的字体作品。该字体与著名的“方正兰亭黑系列字体”（该系列字体共有十一个不同粗细版本，共十一款字体）系出同源，前者针对屏幕显示，后者针对印刷用。方正公司拥有“方正兰亭黑系列字体”的全部版权。但微软雅黑的版权分为两个部分，在Windows系统的内嵌使用，包括屏幕输出和个人使用为目的的打印，这部分微软已经向方正支付了版权授权费用，所有正版Windows用户均可放心使用。但是以商业发布为目的的微软雅黑版权，仍由北大方正保留。

微软公司在开发新一代操作系统时，为了改善屏幕字体的视觉效果，委托方正公司设计两款字体。微软公司将此两款字体命名为“微软雅黑”和“微软雅黑 Bold”。

这里我们可以看到一个关键词“屏幕输出”，即电脑屏幕上显示和我们关系最大。设计师设计完网页之后，前端需要进行代码制作，这时候使用的微软雅黑字体，其实就是属于屏幕输出。

如果要深入搞清楚这个，我们就要了解网页中是如何显示字体的。前端网页字体的定义主要有两种方式：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平台不一样，调用不用的字体以便在对应平台显示最好的效果。

但是有个特例，如果把PC官网中某个含有微软雅黑字体的页面截图，当成商用宣传图，那么这其实就属于侵权了，方正是有理由告的。

                                       @font-face

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

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

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

@font-face {

   font-family: ;

   src: [][, []]*;

   [font-weight: ];

   [font-style: