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