這幾天設(shè)計(jì)圈都被一條字體侵權(quán)消息刷屏，一公司在沒有獲得字體版權(quán)的情況下使用微軟雅黑做印刷品，印刷廠印了5000萬張已經(jīng)全國(guó)商用，公司損失2860萬，裁員42人，含8個(gè)主管。
現(xiàn)在各位設(shè)計(jì)師都知道，微軟雅黑版權(quán)是屬于方正的，并不能免費(fèi)使用！在大家驚嘆賠償金額的時(shí)候，方正官方出來辟謠：
這次事件，方正字體給我們間接地上了一課：想安全使用我們的字體？乖乖付費(fèi)吧。同時(shí)還告訴那些沒有買過版權(quán)的公司：該交保護(hù)費(fèi)了。目前事件已在百度熱點(diǎn)搜索排名第三，也讓中國(guó)很多非設(shè)計(jì)行業(yè)人員了解了方正。
不過大家都在聚焦新聞本身的時(shí)候，有沒有想過，什么樣的字體行為會(huì)受到侵權(quán)呢？
在設(shè)計(jì)行業(yè)中，常見的微軟雅黑字體侵權(quán)主要表現(xiàn)在線上的banner、廣告、頁(yè)面、電影等，線下的印刷品、戶外廣告、書籍等。各位設(shè)計(jì)師對(duì)這些都非常清楚：無版權(quán)，不可商用。
但是在UI設(shè)計(jì)這塊，我們?cè)陔娔X網(wǎng)頁(yè)中顯示的微軟雅黑有版權(quán)嗎？公司官網(wǎng)顯示的文章字體都是微軟雅黑，這樣會(huì)侵權(quán)嗎？我們?cè)倩仡櫹挛④浹藕诘臍v史。
這里我們可以看到一個(gè)關(guān)鍵詞「屏幕輸出」，即電腦屏幕上顯示和我們關(guān)系最大。設(shè)計(jì)師設(shè)計(jì)完網(wǎng)頁(yè)之后，前端需要進(jìn)行代碼制作，這時(shí)候使用的微軟雅黑字體，其實(shí)就是屬于屏幕輸出。
如果要深入搞清楚這個(gè)，我們就要了解網(wǎng)頁(yè)中是如何顯示字體的。前端網(wǎng)頁(yè)字體的定義主要有兩種方式：font-family 和 @font-face。關(guān)于這些前端基礎(chǔ)知識(shí)，各位UI設(shè)計(jì)師必須要了解一下。
? 1. font-family
font-family 屬于前端css屬性中最基礎(chǔ)的一個(gè)屬性，用來定義字體名稱。下面是一個(gè)比較典型的例子。
font-family 規(guī)定元素的字體系列，可以把多個(gè)字體名稱作為一個(gè)「回退」系統(tǒng)來保存。如果瀏覽器不支持第一個(gè)字體，則會(huì)嘗試下一個(gè)。
在實(shí)際的工作中，用戶的電腦一般是 PC 和 Mac，但是這兩個(gè)平臺(tái)的屏幕材質(zhì)、渲染方式都不一樣，所以使用的默認(rèn)字體也是不一樣的。PC 默認(rèn)使用微軟雅黑，而 Mac 默認(rèn)使用蘋方。
當(dāng)我們打開一個(gè)網(wǎng)站，瀏覽器會(huì)讀取 font-family 中的字體名稱，并去檢索用戶電腦系統(tǒng)中的字體，如果有的話就顯示，沒有的話檢索下一個(gè)。
所以，雖然前端代碼中寫了微軟雅黑，但僅僅是一種調(diào)用方法，你的電腦中有就顯示，沒有就顯示其他字體，和版權(quán)是沒有任何關(guān)系的。因?yàn)樗鼉H僅是調(diào)用了終端用戶自身系統(tǒng)中已經(jīng)存在的字體用來屏幕輸出顯示，這不需要任何額外的授權(quán)許可。
以后前端再問你字體如何使用，就可以說根據(jù) Mac 和 PC平臺(tái)不一樣，調(diào)用不同的字體以便在對(duì)應(yīng)平臺(tái)顯示最好的效果。
但是有個(gè)特例，如果把 PC 官網(wǎng)中某個(gè)含有微軟雅黑字體的頁(yè)面截圖，當(dāng)成商用宣傳圖，那么這其實(shí)就屬于侵權(quán)了，方正是有理由告的。
? 2. @font-face
@font-face 屬于css中另一個(gè)字體調(diào)用方法。和 font-family 默認(rèn)調(diào)用電腦字體不同，@font-face 是把自己定義的 Web字體嵌入到網(wǎng)頁(yè)中。
事實(shí)上，例如 ‘Microsoft Yahei’，Arial，sans-serif 等字體都屬于安全字體，即正常電腦都會(huì)默認(rèn)安裝的，所以前端可以直接調(diào)用。
但是如果網(wǎng)頁(yè)需要使用到特殊的字體，并且不想用圖片代替，就可以使用 @font-face 方法。比如下面的結(jié)構(gòu)。
在線客服1號(hào)
微信公眾賬號(hào)