在Web應用程序中使用True類型字體

Question

現在我看到很多網站都使用真正的字體 。 我想知道如何在我們的應用程序中使用真實類型字體，它是否會影響頁面的加載時間？

Answer 1

HTML5允許在CSS中使用TTF字體：

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

要使用它：

h1, h2, h3 { font-family: 'Tagesschrift', 'Georgia', serif; }

查看html5rocks中的更多信息 。

Answer 2

您使用字體嵌入 。

它將影響頁面的整體加載時間，因為必須下載字體數據以及其他內容，樣式等。但是，它將被緩存，因此僅影響頁面的第一個視圖。

Answer 3

由於時間的推移，我想更新已接受的答案。 以下是Font Squirrel在其推薦的“Optimal”設置下輸出的內容。 此時支持.ttf不再重要，應予以忽略。

font-family: 'Tagesschrift';
  src: url('tagesschrift.woff2') format('woff2'),
       url('tagesschrift.woff') format('woff');
  font-weight: normal;
  font-style: normal;

Answer 4

由於瀏覽器兼容性問題，字體嵌入可能有點復雜。 例如，Safari僅支持SVG字體。 IE僅支持.eot，必須首先從.ttf轉換

我發現使用自定義字體的最簡單方法是使用谷歌字體除了有免費的谷歌字體目錄可供選擇外，還有一些提供商可以免費提供更廣泛的字體選擇和購買。