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

近日，设计圈被字体侵权消息刷新。一家公司在没有字体版权的情况下使用微软雅黑作为印刷品。印刷厂印刷了5000万张，已在全国范围内商业使用。公司损失2860万，裁员42人，包括8名主管。

现在所有设计师都知道微软雅黑版权属于方正，不能免费使用！当每个人都对赔偿金额感到惊讶时，方正正出来否认谣言：

在这次事件中，方正字体间接地给了我们一个教训：你想安全地使用我们的字体吗？顺从地付钱。同时，它还告诉那些没有购买版权的公司：是时候支付保护费了。目前，该事件在百度热门搜索中排名第三，这也让许多中国非设计行业人员了解了方正。

然而，当每个人都关注新闻本身时，你有没有想过什么样的字体行为会受到侵权？

在设计行业，微软雅黑字体的常见侵权主要体现在网上baner上、广告、页面、电影等，线下印刷品、户外广告、书籍等。所有的设计师都很清楚这些:没有版权，没有商业用途。

UI前端和微软雅黑

但在UI设计方面，我们在计算机网页上显示的微软雅黑有版权吗？公司官方网站上显示的文章字体是微软雅黑。这会侵权吗？让我们回顾一下微软雅黑的历史。

「微软雅黑」字体是「北大方正电子有限公司」字体作品的设计和开发。字体与名字相匹配「方正兰亭黑系列字体」(本系列字体有11个不同厚度的版本，共11个字体)系同源，前者显示在屏幕上，后者用于印刷。方正公司有「方正兰亭黑系列字体」所有版权。但微软雅黑版权分为两部分，嵌入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+、Firefox33是支持这种字体的最常见字体.5+，Chrome4+，Safari3+，Opera10+，iOS Mobile Safari4.2+。

  2. Open Type Font(.otf)格式

.otf字体被认为是一种内置的原始字体格式 TrueType 在此基础上，它还提供了更多的功能，包括Firefox3.5+和Chrome4.Safari30+.Opera10.0+，iOS Mobile Safari4.2+。

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

.woff字体是 Web字体中最好的格式是开放式的 TrueType/OpenType 压缩版还支持元数据包的分离。支持这种字体的浏览器包括IE9+、Firefox3.5+，Chrome6+，Safari3.Opera11.1+6+。

  4. Embedded Open Type(.eot)格式

.eot字体是 IE 特殊字体，可以从 TrueType IE4+是支持此格式字体的浏览器。

  5. SVG(.svg)格式

.以svg字体为基础 SVG字体渲染的格式，支持Chrome4+和Safari3的浏览器.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 该方法会导致侵权。

商用免费字体常用

首推「优设标题黑」：

对于大多数公司来说，字体版权意识还需要加强。除了付费购买字体外，互联网上还有许多免费的商业字体供设计师选择。以下是一些常用的免费商业字体分类，并附有授权链接供您参考。

另一点是，一些网站在京东阿里巴巴提供汉益和华康的合作字体。请注意，这些字体只能在京东和阿里巴巴平台上使用，方便商家使用。如果在这两个平台之外使用，就会造成侵权。请记住。

避免误导，下载地址已删除华康和汉仪字体。

下载链接：

1. 思源系列

免费字体：思源黑体、思源宋体、思源软黑体、思源真黑体

授权出处：

https://www.google.com/get/noto/http://jikasei.me/font/genjyuu/http://jikasei.me/font/genshin/

2. 明朝系列

免费字体:装甲明朝体、源界明朝、花园明朝。Oradano-Mincho名朝

授权出处：http://fonts.jp/hanazono/

3. 方正系列

免费字体：方正黑体、方正书宋、方正仿宋、方正楷体。

授权出处：http://www.foundertype.com/index.php/About/bookAuth/key/my_sysq.html

4. 明体系列

免费字体:源样明体、源流明体、源云明体、源样黑体、源石黑体、源圆体

授权出处：https://github.com/ButTaiwan?tab=stars

5. 其它中文字体

免费字体：Droid Sans Fallback、庞门正道标题体、Fandol字体(破产黑体)

授权出处：

https://code.google.com/archive/p/droid-sans-mono-py/https://mp.weixin.qq.com/s/BGXeAXreo6CM5-gtdQOuYAhttps://github.com/zenozeng/Free-Chinese-Fonts/issues/13

6. 站酷系列

免费字体：站酷酷黑体、站酷意大利体、站酷快乐体、站酷高端黑体、站酷庆科黄油体、站酷文艺体、站酷小薇LOGO体

授权出处：http://www.zcool.com.cn/special/zcoolfonts/

7. 日式字体

免费字体：超细ゴシック体、Smartfont、KanjyukuGothic

授权出处：

http://font.websozai.jp/line-font-mihon.htmlhttp://flopdesign.com/freefont/smartfont.htmlhttp://www.flopdesign.com/freefont/kanjyukugothic-freefont.html

8. 手写系列

免费字体：手写杂字体、濑户字体、汉仪贤二体、沐瑶软笔手写、手写、杨任东竹石体

授权出处：

http://www39.atpages.jp/yagoinienie/851fontpage.htmlhttps://www.justfont.com/fontdetail/147https://www.zcool.com.cn/article/ZNJK4NDM2.htmlhttps://www.zcool.com.cn/work/ZMjg5MjAwMDQ=.htmlhttps://www.zhihu.com/question/19889152/answer/24565101htttps://mp.weixin.qq.com/s/7kv3i_YEs7x9_9IrCYvBA

9. 刻石录系列

免费字体:刻石录钢笔鹤体、刻石录明体、刻石录颜体

授权出处：http://founder.acgvlyric.org/iu/doku.php

10. 全字库系列

免费字体：全字库说文解字，全字库正宋体，全字库正楷体

授权出处：http://www.cns11643.gov.tw/AIDB/copyright.do

11. 王汉宗系列

免费字体：王汉宗标准楷体空心、王汉宗波卡体空阴、王汉宗波浪体、王汉宗超黑俏皮动物、王汉宗超明体、王汉宗粗钢体标准、王汉宗粗黑体实阴、王汉宗粗圆体双空、王汉宗仿宋标准、王汉宗钢笔行楷、王汉宗海报体半天水、王汉宗特黑体、王汉宗特明体标准、王汉宗细黑体、王汉宗细宋简体、王汉宗颜楷体、王汉宗中魏碑简体

授权出处：https://zh.wikipedia.org/wiki/

12. 文泉驿系列

免费字体:文泉驿黑体、文泉驿微米黑、文泉驿点阵宋体(此宋体无Windows版)

授权出处：http://wenq.org/wqy2/index.cgi?FontGuide

下载上述免费字体链接：https://www.uisdc.com/200-models-free-commercial-fonts

欢迎关注作者微信微信官方账号:「UI黑客」