设计师别担心，微软雅黑这样使用不侵权

时间：2019-05-07 10:50 浏览：892

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

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

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

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

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

UI前端和微软雅黑

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

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

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

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

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

1. 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 官网中某个含有微软雅黑字体的页面截图，当成商用宣传图，那么这其实就属于侵权了，方正是有理由告的。

2. @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字体中的两个基本属性，分别代表加粗和字体样式。

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

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

将「微软雅黑字库」从 Windows 系统中复制出来，安装到苹果机或其它系统中使用；

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

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

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

字体格式介绍

说到 @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’);

}