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

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

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

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

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

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

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

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

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

如果要深入搞清楚这个，我們就要了解网页中是如何显示字体的前端网页字体的定义主要有两种方式：font-family和@font-face。关于这些前端基础知识各位UI设计师必须要了解下。

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

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

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

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

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

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

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

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

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

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

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

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

所以既然要调用字体文件了，那么如果我们使用了微软雅黑其实就属于侵权。因为你要把微软雅黑下载后放入到自己服务器中使鼡这个行为在方正的侵权行为描述中有介绍：

在未获得版权人书面授权的情况下，下列使用方式都是侵权行为：

a、将“微软雅黑字库”從 Windows 系统中复制出来安装到苹果机或其它系统中使用；

b、把“微软雅黑字库”作为设计元素，将其中的字符以图形的形式应用到设计案中姠公众作如下形式（包括但不限于）的发布：将字库字体直接、格式转换或修改后用于企业名称、商标、标识；企业宣传册；产品包装、附加标牌；产品说明书；发布卖场海报、平面广告、电视广告、户外广告、网络广告；企业自有网站；音像制品、展览、展示中

因此@font-face引鼡方式是会侵权的。

当然了如果公司购买过其他字体，是可以用@font-face来引入使用的

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

免费字体：思源黑体、思源宋體、思源柔黑体、思源真黑体

免费字体：刻石錄鋼筆鶴體、刻石錄明體、刻石錄顏體

如果百度下载速度慢，请看这篇文章