1、font-family 屬性的字體侵權問題

font-family 屬于前端css屬性中最基礎的一個屬性，用來定義字體名稱。當我們打開一個網站，瀏覽器會讀取 font-family 中的字體名稱，并去檢索用戶電腦系統中的字體，如果有的話就顯示，沒有的話檢索下一個。所以，如果前端代碼中寫了字體比如：微軟雅黑，但僅僅是一種調用方法，你的電腦中有就顯示，沒有就顯示其他字體，這樣就不會構成侵權問題。因為它僅僅是調用了終端用戶自身系統中已經存在的字體用來屏幕輸出顯示，這不需要任何額外的授權許可。

但這只是限于在電腦上顯示，比如，如果你用你的官網截圖進行宣傳，此時就脫離了電腦系統的范圍，如果你沒有購買這個字體的版權的話就會構成侵權問題。

2、@font-face 屬性的字體侵權問題

@font-face
{
    font-family: myFirstFont;    /*  自定義一個字體名稱 */
    src: url('Sansation_Light.ttf')     /* 字體存儲在服務器上的地址 */
        ,url('Sansation_Light.eot');   
    /* 
        .TTF或.OTF，適用于Firefox 3.5、Safari、Opera；
        .EOT，適用于Internet Explorer 4.0+；
        .SVG，適用于Chrome、IPhone
    */
}

div
{
    font-family:myFirstFont;   /* 使用自定義字體 */
}

@font-face應用到項目中可以參考：http://www.rzrgm.cn/fjdingsd/p/5663561.html

@font-face 屬于css中另一個字體調用方法。和 font-family 默認調用電腦字體不同，@font-face 是把自己定義的 Web字體嵌入到網頁中。上面格式中，src 表示自定義的字體的存放路徑。平常使用的 ‘Microsoft Yahei’，Arial，sans-serif 等字體都屬于安全字體，即正常電腦都會默認安裝的，所以前端可以直接調用。但是如果網頁需要使用到特殊的字體，并且系統上并沒有安裝這些字體的話，那就需要使用 @font-face 方法。我們可以把字體文件下載到項目上，或者是放在服務器上都行，然后在 @font-face 屬性上引用。

在@font-face網絡字體技術之前，瀏覽器顯示網頁上文字使用的字體只能限制在電腦里已經安裝的幾款字體里。而且每個人的電腦里安裝的字體是因人而異的。@font-face的作用是從網上下載并使用自定義字體，使頁面顯示字體不依賴用戶的操作系統字體環境。

使用 @font-face 形式定義字體要調用字體文件，我們需要把字體文件存儲在服務器上，此時我們必須得購買該字體版權才行，否則就是侵權。

這個行為在方正的侵權行為描述中有介紹：

在未獲得版權人書面授權的情況下，下列使用方式都是侵權行為：
將「微軟雅黑字庫」從 Windows 系統中復制出來，安裝到蘋果機或其它系統中使用；
把「微軟雅黑字庫」作為設計元素，將其中的字符以圖形的形式應用到設計案中向公眾作如下形式（包括但不限于）的發布：將字庫字體直接、格式轉換或修改后用于企業名稱、商標、標識；企業宣傳冊；產品包裝、附加標牌；產品說明書；發布賣場海報、平面廣告、電視廣告、戶外廣告、網絡廣告；企業自有網站；音像制品、展覽、展示中。

3、不同字體文件在瀏覽器中的兼容問題

• Webkit/Safari(3.2+)：ttf、.otf；
• Opera (10+)： .ttf、.otf、.svg；
• Internet Explorer： ie4+ 支持 eot，ie9+ 支持 WOFF；
• Firefox(3.5+)：.ttf)、.otf、3.6+ 支持 WOFF
• Google Chrome：.ttf、.otf、6+ 支持WOFF

由上面可以得出：.eot + .ttf /.otf + svg + woff = 所有瀏覽器的完美支持。

也可參考下圖：

（TrueType：TTF）

3.1、兼容所有瀏覽器的@font-face寫法

下面寫法中，format 指的是自定義的字體的格式，主要用來幫助瀏覽器識別，其值主要有以下幾種類型：truetype,opentype,truetype-aat,embedded-opentype,avg等。

@font-face {
font-family: 'YourWebFontName';
src: url('YourWebFontName.eot'); /* 兼容 IE9 */
src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
         url('YourWebFontName.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('YourWebFontName.svg#YourWebFontName') format('svg'); /* iOS 遺留歷史問題*/
}

參考：http://www.rzrgm.cn/liAnran/p/11606977.html、http://www.rzrgm.cn/jecyhw/p/3891537.html