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