這幾天設(shè)計(jì)圈都被一條字體侵權(quán)消息刷屏,一公司在沒(méi)有獲得字體版權(quán)的情況下使用微軟雅黑做印刷品,印刷廠印了5000萬(wàn)張已經(jīng)全國(guó)商用,公司損失2860萬(wàn),裁員42人,含8個(gè)主管。
現(xiàn)在各位設(shè)計(jì)師都知道,微軟雅黑版權(quán)是屬于方正的,并不能免費(fèi)使用!在大家驚嘆賠償金額的時(shí)候,方正官方出來(lái)辟謠:
這次事件,方正字體給我們間接地上了一課:想安全使用我們的字體?乖乖付費(fèi)吧。同時(shí)還告訴那些沒(méi)有買(mǎi)過(guò)版權(quán)的公司:該交保護(hù)費(fèi)了。目前事件已在百度熱點(diǎn)搜索排名第三,也讓中國(guó)很多非設(shè)計(jì)行業(yè)人員了解了方正。
不過(guò)大家都在聚焦新聞本身的時(shí)候,有沒(méi)有想過(guò),什么樣的字體行為會(huì)受到侵權(quán)呢?
在設(shè)計(jì)行業(yè)中,常見(jiàn)的微軟雅黑字體侵權(quán)主要表現(xiàn)在線上的banner、廣告、頁(yè)面、電影等,線下的印刷品、戶(hù)外廣告、書(shū)籍等。各位設(shè)計(jì)師對(duì)這些都非常清楚:無(wú)版權(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è)屬性,用來(lái)定義字體名稱(chēng)。下面是一個(gè)比較典型的例子。
font-family 規(guī)定元素的字體系列,可以把多個(gè)字體名稱(chēng)作為一個(gè)「回退」系統(tǒng)來(lái)保存。如果瀏覽器不支持第一個(gè)字體,則會(huì)嘗試下一個(gè)。
在實(shí)際的工作中,用戶(hù)的電腦一般是 PC 和 Mac,但是這兩個(gè)平臺(tái)的屏幕材質(zhì)、渲染方式都不一樣,所以使用的默認(rèn)字體也是不一樣的。PC 默認(rèn)使用微軟雅黑,而 Mac 默認(rèn)使用蘋(píng)方。
當(dāng)我們打開(kāi)一個(gè)網(wǎng)站,瀏覽器會(huì)讀取 font-family 中的字體名稱(chēng),并去檢索用戶(hù)電腦系統(tǒng)中的字體,如果有的話就顯示,沒(méi)有的話檢索下一個(gè)。
所以,雖然前端代碼中寫(xiě)了微軟雅黑,但僅僅是一種調(diào)用方法,你的電腦中有就顯示,沒(méi)有就顯示其他字體,和版權(quán)是沒(méi)有任何關(guān)系的。因?yàn)樗鼉H僅是調(diào)用了終端用戶(hù)自身系統(tǒng)中已經(jīng)存在的字體用來(lái)屏幕輸出顯示,這不需要任何額外的授權(quán)許可。
以后前端再問(wèn)你字體如何使用,就可以說(shuō)根據(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)。