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

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: <YourWebFontName>;

src: <source> [<format>][,<source> [<format>]]*;

[font-weight: <weight>];

[font-style: <style>];

font-family表示自定义的字体名称。

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

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

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

在未获得版权人书面授权的情况下，下列使用方式都是侵权行为：
a、将“微软雅黑字库”从 Windows 系统中复制出来，安装到苹果机或其它系统中使用；
b、把“微软雅黑字库”作为设计元素，将其中的字符以图形的形式应用到设计案中向公众作如下形式（包括但不限于）的发布：将字库字体直接、格式转换或修改后用于企业名称、商标、标识；企业宣传册；产品包装、附加标牌；产品说明书；发布卖场海报、平面广告、电视广告、户外广告、网络广告；企业自有网站；音像制品、展览、展示中。
因此@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');

通过以上的分析，我们就可以得出结论：font-family方法是没有问题的，但是@font-face方法就会造成侵权。

常用的可商用免费字体

对于大部分公司来说，字体版权意识还需要加强，除了付费购买字体之外，互联网还有很多免费可商用的字体共设计师选择，下面是一些常用的免费可商用字体整理，附有授权链接，供大家查阅。

另外还有一点就是，有些网站提供了汉仪和华康在京东阿里的合作字体，注意，这些字体只能在京东和阿里平台使用，是方便商家使用的，如果在这俩平台之外使用就会造成侵权，请大家谨记。

由于会造成误导，下载地址已把华康和汉仪字体去除。

下载链接: https://pan.baidu.com/s/1PETjqh0v9DsMVjR65hVG2g

提取码: vxef

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

授权出处：

https://www.google.com/get/noto/

http://jikasei.me/font/genjyuu/

http://jikasei.me/font/genshin/

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

http://fonts.jp/hanazono/

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

授权出处：

http://www.foundertype.com/index.php/About/bookAut...

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

https://github.com/ButTaiwan?tab=stars

其它中文字体

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

https://code.google.com/archive/p/droid-sans-mono-...

https://mp.weixin.qq.com/s/BGXeAXrEo6CM5-gtdQOuYA

https://github.com/zenozeng/Free-Chinese-Fonts/iss...

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

http://www.zcool.com.cn/special/zcoolfonts/

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

http://font.websozai.jp/line-font-mihon.html

http://flopdesign.com/freefont/smartfont.html

http://www.flopdesign.com/freefont/kanjyukugothic-...

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

http://www39.atpages.jp/yagoinienie/851fontpage.html

https://www.justfont.com/fontdetail/147

https://www.zcool.com.cn/article/ZNjk4NDM2.html

https://www.zcool.com.cn/work/ZMjg5MjAwMDQ=.html

https://www.zhihu.com/question/19889152/answer/245...

https://mp.weixin.qq.com/s/7kv3i_YEs7x9_9IrCDYvBA

刻石錄系列

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

授权出处：

http://founder.acgvlyric.org/iu/doku.php/記...

全字库系列

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

http://www.cns11643.gov.tw/AIDB/copyright.do

王漢宗系列

免费字体：王漢宗標楷體空心、王漢宗波卡體空陰、王漢宗波浪體、王漢宗超黑俏皮動物、王漢宗超明體、王漢宗粗鋼體標準、王漢宗粗黑體實陰、王漢宗粗圓體雙空、王漢宗仿宋標準、王漢宗鋼筆行楷、王漢宗海報體半天水、王漢宗特黑體、王漢宗特明體標準、王漢宗細黑體、王漢宗細新宋簡體、王漢宗顏楷體、王漢宗中魏碑簡體

授权出处：

https://zh.wikipedia.org/wiki/%E7%8E%8B%E6%BC%A2%E5%AE%97%E8%87%AA%E7%94%B1%E5%AD%97%E5%9E%8B

文泉驿系列

免费字体：文泉驿正黑体、文泉驿微米黑、文泉驿点阵宋体（此宋体无Windows版本...）

授权出处：

http://wenq.org/wqy2/index.cgi?FontGuide

以上免费字体下载链接

下载链接: https://pan.baidu.com/s/1PETjqh0v9DsMVjR65hVG2g

提取码: vxef

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

《突破限制！非会员快速下载百度云资源》

本文经作者授权转载。

作者： UI黑客

原文地址： http://www.uihacker.com/css-font-family/ 电话：19130671449

©2014-2025 Mockplus Software Co.,Ltd. All rights reserved. 蜀ICP备13002159号-8

开发者名称：成都摹客科技有限公司摹客App版本号：v1.5.6