在css中使用ttf文件

據我所知，在這種情況下使用本地存儲的自定義字體，您可以使用與此類似的東西。在css中使用ttf文件

@font-face { 
    font-family: 'theFontFamily'; 
    src local('the font'), 
     local('the-font'), 
     url(path/to/the-font); 
} 

.fontClass { 
    font-family: 'theFontFamily', extra_settings; 
}

所以在本地使用這個font，你會期望這個工作嗎？

@font-face { 
    font-family: 'Pacifico'; 
    src: local('Pacifico Regular'), 
     local('Pacifico-Regular'), 
     url(resources/fonts/Pacifico.ttf); 
} 

.logo-container { 
    font-family: 'Pacifico', cursive; 
}

，當我嘗試它的代碼更改字體，只是沒有到所需的字體。它看起來像這樣。

而如果我用的是進口環節，<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">，只是用下面的代碼工作。

.logo-container { 
    font-family: 'Pacifico', cursive; 
}

這看起來像這樣。

我可能已經做了一個簡單的錯誤，我會很感激，如果有人能幫助我解決這個。

來源

2016-07-22 Dan

你確定你有合適的網址嗎？字體在本地看起來不同的原因是因爲'cursive'被加載而不是'Pacifico'，因爲它不能被發現 – Bubblesphere

@Bubblesphere我相信這是問題所在。現在只要找到正確的網址就可以了。谷歌Chrome的最新版本 – Dan

確保您正確鏈接源網址。嘗試

@font-face { 

    font-family: 'myPacifico' ; 
    src: url('/resources/fonts/Placifico.ttf') format('truetype'); 

}

這是基本夠用，然後用... .logo容器{在這種情況下

 font-family: 'myPacifico', san-serif;  }

聖襯線是後備。在這種情況下，ive鏈接到常規ttf文件。對於粗體和其他樣式，我們必須使用不同的名稱鏈接到另一個@ font-face。

來源

2016-07-22 20:05:42

也許這將工作（棘手肯定地說沒有能夠測試100％）：

@font-face { 
    font-family: 'Pacifico'; 
    src: url('Pacifico-Regular.eot'); 
    src: url('Pacifico-Regular.eot?#iefix') 
     url('Pacifico-Regular.woff2') format('woff2'), 
     url('Pacifico-Regular.woff') format('woff'), 
     url('Pacifico-Regular.ttf') format('truetype'), 
     url('Pacifico-Regular.svg#svgFontName') format('svg'); 
}

只使用本地TrueType字體：

@font-face { 
    font-family: 'Pacifico'; 
    src: url('Pacifico-Regular.ttf'); 
}

請記住，你應該不僅僅具有TrueType字體以實現最高級別的瀏覽器兼容性，而是僅使用TTF進行測試，您可以刪除任何不涉及TTF版本的行。

來源

2016-07-22 19:59:18 Toby

不幸的是，當你點擊谷歌字體下載時，至少在這種情況下，只下載'.ttf'。 – Dan

我相信下載的目的是讓你可以在本地使用字體，就像在Photoshop和Illustrator中一樣。您可以刪除除TTF行之外的所有行，只需注意您只需使用TTF即可獲得多種瀏覽器支持。 – Toby

您正在測試哪個瀏覽器？ – Bubblesphere

在css中使用ttf文件

回答

相關問題