这几天设计圈都被一条字体侵权消息刷屏，一公司在没有获得字体版权的情况下使用微软雅黑做印刷品，印刷厂印了5000万张已经全国商用，公司损失2860万，裁员42人，含8个主管。
现在各位设计师都知道，微软雅黑版权是属于方正的，并不能免费使用！在大家惊叹赔偿金额的时候，方正官方出来辟谣：
这次事件，方正字体给我们间接地上了一课：想安全使用我们的字体？乖乖付费吧。同时还告诉那些没有买过版权的公司：该交保护费了。目前事件已在百度热点搜索排名第三，也让中国很多非设计行业人员了解了方正。
不过大家都在聚焦新闻本身的时候，有没有想过，什么样的字体行为会受到侵权呢？
在设计行业中，常见的微软雅黑字体侵权主要表现在线上的banner、广告、页面、电影等，线下的印刷品、户外广告、书籍等。各位设计师对这些都非常清楚：无版权，不可商用。
但是在UI设计这块，我们在电脑网页中显示的微软雅黑有版权吗？公司官网显示的文章字体都是微软雅黑，这样会侵权吗？我们再回顾下微软雅黑的历史。
这里我们可以看到一个关键词「屏幕输出」，即电脑屏幕上显示和我们关系最大。设计师设计完网页之后，前端需要进行代码制作，这时候使用的微软雅黑字体，其实就是属于屏幕输出。
如果要深入搞清楚这个，我们就要了解网页中是如何显示字体的。前端网页字体的定义主要有两种方式：font-family 和 @font-face。关于这些前端基础知识，各位UI设计师必须要了解一下。
1. font-family
font-family 属于前端css属性中最基础的一个属性，用来定义字体名称。下面是一个比较典型的例子。
font-family 规定元素的字体系列，可以把多个字体名称作为一个「回退」系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。
在实际的工作中，用户的电脑一般是 PC 和 Mac，但是这两个平台的屏幕材质、渲染方式都不一样，所以使用的默认字体也是不一样的。PC 默认使用微软雅黑，而 Mac 默认使用苹方。
当我们打开一个网站，浏览器会读取 font-family 中的字体名称，并去检索用户电脑系统中的字体，如果有的话就显示，没有的话检索下一个。
所以，虽然前端代码中写了微软雅黑，但仅仅是一种调用方法，你的电脑中有就显示，没有就显示其他字体，和版权是没有任何关系的。因为它仅仅是调用了终端用户自身系统中已经存在的字体用来屏幕输出显示，这不需要任何额外的授权许可。
以后前端再问你字体如何使用，就可以说根据 Mac 和 PC平台不一样，调用不同的字体以便在对应平台显示最好的效果。
但是有个特例，如果把 PC 官网中某个含有微软雅黑字体的页面截图，当成商用宣传图，那么这其实就属于侵权了，方正是有理由告的。
2. @font-face
@font-face 属于css中另一个字体调用方法。和 font-family 默认调用电脑字体不同，@font-face 是把自己定义的 Web字体嵌入到网页中。
事实上，例如 ‘Microsoft Yahei’，Arial，sans-serif 等字体都属于安全字体，即正常电脑都会默认安装的，所以前端可以直接调用。
但是如果网页需要使用到特殊的字体，并且不想用图片代替，就可以使用 @font-face 方法。比如下面的结构。
在线客服1号
微信公众账号