設計師(shī)别擔心，微(wēi)軟雅黑(hēi)這(zhè)樣使用不侵權

這(zhè)幾天設計圈都(dōu)被一(yī)條字體侵權消息刷屏，一(yī)公司在沒有獲得字體版權的情況下(xià)使用微(wēi)軟雅黑(hēi)做(zuò)印刷品，印刷廠印了(le)5000萬張已經全國(guó)商用，公司損失2860萬，裁員(yuán)42人(rén)，含8個主管。

現在各位設計師(shī)都(dōu)知道(dào)，微(wēi)軟雅黑(hēi)版權是屬于方正的，并不能(néng)免費(fèi)使用！在大家驚歎賠償金(jīn)額的時(shí)候，方正官方出來辟謠：

這(zhè)次事件，方正字體給我們間(jiān)接地(dì)上(shàng)了(le)一(yī)課：想安全使用我們的字體？乖乖付費(fèi)吧。同時(shí)還告訴那(nà)些沒有買過版權的公司：該交保護費(fèi)了(le)。目前事件已在百度熱(rè)點搜索排名第三，也讓中國(guó)很(hěn)多非設計行(xíng)業人(rén)員(yuán)了(le)解了(le)方正。

不過大家都(dōu)在聚焦新聞本身的時(shí)候，有沒有想過，什麽樣的字體行(xíng)為(wèi)會受到侵權呢？

在設計行(xíng)業中，常見(jiàn)的微(wēi)軟雅黑(hēi)字體侵權主要(yào)表現在線上(shàng)的banner、廣告、頁面、電影等，線下(xià)的印刷品、戶外(wài)廣告、書(shū)籍等。各位設計師(shī)對這(zhè)些都(dōu)非常清楚：無版權，不可(kě)商用。

UI前端和(hé)微(wēi)軟雅黑(hēi)

但(dàn)是在UI設計這(zhè)塊，我們在電腦網頁中顯示的微(wēi)軟雅黑(hēi)有版權嗎？公司官網顯示的文章(zhāng)字體都(dōu)是微(wēi)軟雅黑(hēi)，這(zhè)樣會侵權嗎？我們再回顧下(xià)微(wēi)軟雅黑(hēi)的曆史。

「微(wēi)軟雅黑(hēi)」字體是「北大方正電子有限公司」設計開(kāi)發的字體作(zuò)品。該字體與著名的「方正蘭亭黑(hēi)系列字體」（該系列字體共有十一(yī)個不同粗細版本，共十一(yī)款字體）系出同源，前者針對屏幕顯示，後者針對印刷用。方正公司擁有「方正蘭亭黑(hēi)系列字體」的全部版權。但(dàn)微(wēi)軟雅黑(hēi)的版權分為(wèi)兩個部分，在Windows系統的內(nèi)嵌使用，包括屏幕輸出和(hé)個人(rén)使用為(wèi)目的的打印，這(zhè)部分微(wēi)軟已經向方正支付了(le)版權授權費(fèi)用，所有正版Windows用戶均可(kě)放心使用。但(dàn)是以商業發布為(wèi)目的的微(wēi)軟雅黑(hēi)版權，仍由北大方正保留。

微(wēi)軟公司在開(kāi)發新一(yī)代操作(zuò)系統時(shí)，為(wèi)了(le)改善屏幕字體的視(shì)覺效果，委托方正公司設計兩款字體。微(wēi)軟公司将此兩款字體命名為(wèi)「微(wēi)軟雅黑(hēi)」和(hé)「微(wēi)軟雅黑(hēi) Bold」。

這(zhè)裏我們可(kě)以看(kàn)到一(yī)個關鍵詞「屏幕輸出」，即電腦屏幕上(shàng)顯示和(hé)我們關系最大。設計師(shī)設計完網頁之後，前端需要(yào)進行(xíng)代碼制作(zuò)，這(zhè)時(shí)候使用的微(wēi)軟雅黑(hēi)字體，其實就是屬于屏幕輸出。

如(rú)果要(yào)深入搞清楚這(zhè)個，我們就要(yào)了(le)解網頁中是如(rú)何顯示字體的。前端網頁字體的定義主要(yào)有兩種方式：font-family 和(hé) @font-face。關于這(zhè)些前端基礎知識，各位UI設計師(shī)必須要(yào)了(le)解一(yī)下(xià)。

  1. font-family

font-family 屬于前端css屬性中最基礎的一(yī)個屬性，用來定義字體名稱。下(xià)面是一(yī)個比較典型的例子。

font-family: Helvetica, “PingFangSC”, ‘Microsoft Yahei’, ‘微(wēi)軟雅黑(hēi)’, Arial, sans-serif;

font-family 規定元素的字體系列，可(kě)以把多個字體名稱作(zuò)為(wèi)一(yī)個「回退」系統來保存。如(rú)果浏覽器不支持第一(yī)個字體，則會嘗試下(xià)一(yī)個。

在實際的工(gōng)作(zuò)中，用戶的電腦一(yī)般是 PC 和(hé) Mac，但(dàn)是這(zhè)兩個平台的屏幕材質、渲染方式都(dōu)不一(yī)樣，所以使用的默認字體也是不一(yī)樣的。PC 默認使用微(wēi)軟雅黑(hēi)，而 Mac 默認使用蘋方。

當我們打開(kāi)一(yī)個網站，浏覽器會讀取 font-family 中的字體名稱，并去檢索用戶電腦系統中的字體，如(rú)果有的話就顯示，沒有的話檢索下(xià)一(yī)個。

所以，雖然前端代碼中寫了(le)微(wēi)軟雅黑(hēi)，但(dàn)僅僅是一(yī)種調用方法，你的電腦中有就顯示，沒有就顯示其他(tā)字體，和(hé)版權是沒有任何關系的。因為(wèi)它僅僅是調用了(le)終端用戶自(zì)身系統中已經存在的字體用來屏幕輸出顯示，這(zhè)不需要(yào)任何額外(wài)的授權許可(kě)。

以後前端再問(wèn)你字體如(rú)何使用，就可(kě)以說根據 Mac 和(hé) PC平台不一(yī)樣，調用不同的字體以便在對應平台顯示最好的效果。

但(dàn)是有個特例，如(rú)果把 PC 官網中某個含有微(wēi)軟雅黑(hēi)字體的頁面截圖，當成商用宣傳圖，那(nà)麽這(zhè)其實就屬于侵權了(le)，方正是有理由告的。

  2. @font-face

@font-face 屬于css中另一(yī)個字體調用方法。和(hé) font-family 默認調用電腦字體不同，@font-face 是把自(zì)己定義的 Web字體嵌入到網頁中。

事實上(shàng)，例如(rú) ‘Microsoft Yahei’，Arial，sans-serif 等字體都(dōu)屬于安全字體，即正常電腦都(dōu)會默認安裝的，所以前端可(kě)以直接調用。

但(dàn)是如(rú)果網頁需要(yào)使用到特殊的字體，并且不想用圖片代替，就可(kě)以使用 @font-face 方法。比如(rú)下(xià)面的結構。

@font-face {

font-family: ;

src: [][, []]*;

[font-weight: ];

[font-style:


Copyright © 2004-2018
京ICP證000000号