設(shè)計師別擔(dān)心，微軟雅黑這樣使用不侵權(quán)
微軟雅黑是有版權(quán)的，各種線上線下設(shè)計都要避開，那么很多人網(wǎng)頁上顯示的微軟雅黑字體，這個算侵權(quán)嗎？
這幾天設(shè)計圈都被一條字體侵權(quán)消息刷屏，一公司在沒有獲得字體版權(quán)的情況下使用微軟雅黑做印刷品，樣稿印刷廠印了5000萬張已經(jīng)全國商用，公司損失2860萬，裁員42人，含8個主管。
現(xiàn)在各位設(shè)計師都知道，微軟雅黑版權(quán)是屬于方正的，并不能免費使用！在大家驚嘆賠償金額的時候，方正官方出來辟謠：
這次事件，方正字體給我們間接地上了一課：想安全使用我們的字體？乖乖付費吧。同時還告訴那些沒有買過版權(quán)的公司：該交保護(hù)費了。目前事件已在百度熱點搜索排名第三，也讓中國很多非設(shè)計行業(yè)人員了解了方正。
不過在大家都在聚焦新聞本身的時候，有沒有想過，什么樣的字體行為會受到侵權(quán)呢？
在設(shè)計行業(yè)中，常見的微軟雅黑字體侵權(quán)主要表現(xiàn)在線上的banner、廣告、頁面、電影等，線下的印刷品、戶外廣告、書籍等。各位設(shè)計師對這些都非常清楚：無版權(quán)，不可商用。
UI前端和微軟雅黑
但是在UI設(shè)計這塊，我們在電腦網(wǎng)頁中顯示的微軟雅黑有版權(quán)嗎？公司官網(wǎng)顯示的文章字體都是微軟雅黑，這樣會侵權(quán)嗎？我們再回顧下微軟雅黑的歷史。
“微軟雅黑”字體是“北大方正電子有限公司”設(shè)計開發(fā)的字體作品。該字體與著名的“方正蘭亭黑系列字體”（該系列字體共有十一個不同粗細(xì)版本，共十一款字體）系出同源，前者針對屏幕顯示，后者針對印刷用。方正公司擁有“方正蘭亭黑系列字體”的全部版權(quán)。但微軟雅黑的版權(quán)分為兩個部分，在Windows系統(tǒng)的內(nèi)嵌使用，包括屏幕輸出和個人使用為目的的打印，這部分微軟已經(jīng)向方正支付了版權(quán)授權(quán)費用，所有正版Windows用戶均可放心使用。但是以商業(yè)發(fā)布為目的的微軟雅黑版權(quán)，仍由北大方正保留。
微軟公司在開發(fā)新一代操作系統(tǒng)時，為了改善屏幕字體的視覺效果，委托方正公司設(shè)計兩款字體。微軟公司將此兩款字體命名為“微軟雅黑”和“微軟雅黑 Bold”。
這里我們可以看到一個關(guān)鍵詞“屏幕輸出”，即電腦屏幕上顯示和我們關(guān)系最大。設(shè)計師設(shè)計完網(wǎng)頁之后，前端需要進(jìn)行代碼制作，這時候使用的微軟雅黑字體，其實就是屬于屏幕輸出。
如果要深入搞清楚這個，我們就要了解網(wǎng)頁中是如何顯示字體的。前端網(wǎng)頁字體的定義主要有兩種方式：font-family和@font-face。關(guān)于這些前端基礎(chǔ)知識，各位UI設(shè)計師必須要了解下。
font-family
font-family屬于前端css屬性中最基礎(chǔ)的一個屬性，用來定義字體名稱。下面是一個比較典型的例子。
font-family: Helvetica, ''PingFangSC'', 'Microsoft Yahei', '微軟雅黑', Arial, sans-serif;
font-family規(guī)定元素的字體系列，可以把多個字體名稱作為一個“回退”系統(tǒng)來保存。如果瀏覽器不支持第一個字體，則會嘗試下一個。
在實際的工作中，用戶的電腦一般是PC和Mac，但是這兩個平臺的屏幕材質(zhì)、渲染方式都不一樣，所以使用的默認(rèn)字體也是不一樣的。PC默認(rèn)使用微軟雅黑，而Mac默認(rèn)使用蘋方。
當(dāng)我們打開一個網(wǎng)站，瀏覽器會讀取font-family中的字體名稱，并去檢索用戶電腦系統(tǒng)中的字體，如果有的話就顯示，沒有的話檢索下一個。
所以，雖然前端代碼中寫了微軟雅黑，但僅僅是一種調(diào)用方法，你的電腦中有就顯示，沒有就顯示其他字體，和版權(quán)是沒有任何關(guān)系的。因為它僅僅是調(diào)用了終端用戶自身系統(tǒng)中已經(jīng)存在的字體用來屏幕輸出顯示，這不需要任何額外的授權(quán)許可。
以后前端再問你字體如何使用，就可以說根據(jù)Mac和PC平臺不一樣，調(diào)用不用的字體以便在對應(yīng)平臺顯示最好的效果。
但是有個特例，如果把PC官網(wǎng)中某個含有微軟雅黑字體的頁面截圖，當(dāng)成商用宣傳圖，那么這其實就屬于侵權(quán)了，方正是有理由告的。
@font-face
@font-face屬于css中另一個字體調(diào)用方法。和font-family默認(rèn)調(diào)用電腦字體不同，@font-face是把自己定義的Web字體嵌入到網(wǎng)頁中。
事實上，例如 'Microsoft Yahei', Arial, sans-serif等字體都屬于安全字體，即正常電腦都會默認(rèn)安裝的，所以前端可以直接調(diào)用。
但是如果網(wǎng)頁需要使用到特殊的字體，并且不想用圖片代替，就可以使用@font-face方法。比如下面的結(jié)構(gòu)。
@font-face {
font-family: <YourWebFontName>;
src: <source> [<format>][,<source> [<format>]]*;
[font-weight: <weight>];
[font-style: <style>];
}
font-family表示自定義的字體名稱。
src表示自定義的字體的存放路徑。
font-weight和font-style屬于css字體中的兩個基本屬性，分別代表加粗和字體樣式。
所以，既然要調(diào)用字體文件了，那么如果我們使用了微軟雅黑，其實就屬于侵權(quán)。因為你要把微軟雅黑下載后放入到自己服務(wù)器中使用，這個行為在方正的侵權(quán)行為描述中有介紹：
在未獲得版權(quán)人書面授權(quán)的情況下，下列使用方式都是侵權(quán)行為：
a、將“微軟雅黑字庫”從 Windows 系統(tǒng)中復(fù)制出來，安裝到蘋果機(jī)或其它系統(tǒng)中使用；
b、把“微軟雅黑字庫”作為設(shè)計元素，將其中的字符以圖形的形式應(yīng)用到設(shè)計案中向公眾作如下形式（包括但不限于）的發(fā)布：將字庫字體直接、格式轉(zhuǎn)換或修改后用于企業(yè)名稱、商標(biāo)、標(biāo)識；企業(yè)宣傳冊；產(chǎn)品包裝、附加標(biāo)牌；產(chǎn)品說明書；發(fā)布賣場海報、平面廣告、電視廣告、戶外廣告、網(wǎng)絡(luò)廣告；企業(yè)自有網(wǎng)站；音像制品、展覽、展示中。
因此@font-face引用方式是會侵權(quán)的。
當(dāng)然了，如果公司購買過其他字體，是可以用@font-face來引入使用的。
字體格式介紹
說到@font-face引入字體，就不得不提到字體的格式了。因為不同的瀏覽器對字體格式支持是不一致的，所以各位設(shè)計師要簡單了解一下各種版本瀏覽器支持什么樣的字體。
1、True Type Font(.ttf)格式
.ttf字體是Windows和Mac的最常見的字體，支持這種字體的瀏覽器有IE9+，F(xiàn)irefox3.5+，Chrome4+，Safari3+，Opera10+，iOS Mobile Safari4.2+
2、Open Type Font(.otf)格式
.otf字體被認(rèn)為是一種原始的字體格式，其內(nèi)置在TrueType的基礎(chǔ)上，所以也提供了更多的功能,支持這種字體的瀏覽器有Firefox3.5+，Chrome4.0+，Safari3.1+，Opera10.0+，iOS Mobile Safari4.2+
3、Web Open Font Format(.woff)格式
.woff字體是Web字體中最佳格式，他是一個開放的TrueType/OpenType的壓縮版本，同時也支持元數(shù)據(jù)包的分離,支持這種字體的瀏覽器有IE9+，F(xiàn)irefox3.5+，Chrome6+，Safari3.6+，Opera11.1+
4、Embedded Open Type(.eot)格式
.eot字體是IE專用字體，可以從TrueType創(chuàng)建此格式字體,支持這種字體的瀏覽器有IE4+
5、SVG(.svg)格式
.svg字體是基于SVG字體渲染的一種格式,支持這種字體的瀏覽器有Chrome4+，Safari3.1+，Opera10.0+，iOS Mobile Safari3.2+
是不是很熟悉？看到這里，很多設(shè)計師會想到iconfont。千萬不要把iconfont想成一個簡單的圖標(biāo)素材庫，它的潛力比想象的要大得多。
Iconfont本質(zhì)上就是把圖標(biāo)轉(zhuǎn)化為字體，官方的三種使用方法中（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');
}
通過以上的分析，我們就可以得出結(jié)論：font-family方法是沒有問題的，但是@font-face方法就會造成侵權(quán)。
常用的可商用免費字體
對于大部分公司來說，字體版權(quán)意識還需要加強(qiáng)，除了付費購買字體之外，互聯(lián)網(wǎng)還有很多免費可商用的字體共設(shè)計師選擇，下面是一些常用的免費可商用字體整理，附有授權(quán)鏈接，供大家查閱。
另外還有一點就是，有些網(wǎng)站提供了漢儀和華康在京東阿里的合作字體，注意，這些字體只能在京東和阿里平臺使用，是方便商家使用的，如果在這倆平臺之外使用就會造成侵權(quán)，請大家謹(jǐn)記。
由于會造成誤導(dǎo)，下載地址已把華康和漢儀字體去除。
下載鏈接: https://pan.baidu.com/s/1PETjqh0v9DsMVjR65hVG2g
提取碼: vxef
思源系列
免費字體：思源黑體、思源宋體、思源柔黑體、思源真黑體
授權(quán)出處：
https://www.google.com/get/noto/
http://jikasei.me/font/genjyuu/
http://jikasei.me/font/genshin/
明朝系列
免費字體：裝甲明朝體、源界明朝、花園明朝、Oradano-Mincho名朝
授權(quán)出處
方正系列
免費字體：方正黑體、方正書宋、方正仿宋、方正楷體。
授權(quán)出處：
http://www.foundertype.com/index.php/About/bookAuth/key/my_sysq.html
明體系列
免費字體：源樣明體、源流明體、源云明體、源樣黑體、源石黑體、源泉圓體
授權(quán)出處
https://github.com/ButTaiwan?tab=stars
其它中文字體
免費字體：Droid Sans Fallback、龐門正道標(biāo)題體、Fandol字體（破產(chǎn)黑體）
授權(quán)出處
https://code.google.com/archive/p/droid-sans-mono-py/
https://mp.weixin.qq.com/s/BGXeAXrEo6CM5-gtdQOuYA
https://github.com/zenozeng/Free-Chinese-Fonts/issues/13
站酷系列
免費字體：站酷酷黑體、站酷意大利體、站酷快樂體、站酷高端黑體、站酷慶科黃油體、站酷文藝體、站酷小薇LOGO體
授權(quán)出處
http://www.zuodeer.cn/special/zcoolfonts/
日式字體
免費字體：超極細(xì)ゴシック體、Smartfont、KanjyukuGothic
授權(quán)出處
http://font.websozai.jp/line-font-mihon.html
http://flopdesign.com/freefont/smartfont.html
http://www.flopdesign.com/freefont/kanjyukugothic-freefont.html
手寫系列
免費字體：手寫雜字體、瀨戶字體、漢儀賢二體、沐瑤軟筆手寫體、手寫體、楊任東竹石體
授權(quán)出處
http://www39.atpages.jp/yagoinienie/851fontpage.html
https://www.justfont.com/fontdetail/147
http://www.zuodeer.cn/article/ZNjk4NDM2.html
http://www.zuodeer.cn/work/ZMjg5MjAwMDQ=.html
https://www.zhihu.com/question/19889152/answer/245685101
https://mp.weixin.qq.com/s/7kv3i_YEs7x9_9IrCDYvBA
刻石錄系列
免費字體：刻石錄鋼筆鶴體、刻石錄明體、刻石錄顏體
授權(quán)出處：
全字庫系列
免費字體：全字庫說文解字、全字庫正宋體、全字庫正楷體
授權(quán)出處
http://www.cns11643.gov.tw/AIDB/copyright.do
王漢宗系列
免費字體：王漢宗標(biāo)楷體空心、王漢宗波卡體空陰、王漢宗波浪體、王漢宗超黑俏皮動物、王漢宗超明體、王漢宗粗鋼體標(biāo)準(zhǔn)、王漢宗粗黑體實陰、王漢宗粗圓體雙空、王漢宗仿宋標(biāo)準(zhǔn)、王漢宗鋼筆行楷、王漢宗海報體半天水、王漢宗特黑體、王漢宗特明體標(biāo)準(zhǔn)、王漢宗細(xì)黑體、王漢宗細(xì)新宋簡體、王漢宗顏楷體、王漢宗中魏碑簡體
授權(quán)出處：
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版本...）
授權(quán)出處：
http://wenq.org/wqy2/index.cgi?FontGuide
以上免費字體下載鏈接
下載鏈接: https://pan.baidu.com/s/1PETjqh0v9DsMVjR65hVG2g
提取碼: vxef
如果百度下載速度慢，請看這篇文章
END
