☰

使用Google網頁字體

tag-icon • tag-icon websites license ubuntu-font-family
使用Google網頁字體

考慮以下許可證：

如何在任何網站上使用 Ubuntu 字型系列而不讓使用者安裝它？
任何將其與以下工具一起使用的機會：http://code.google.com/intl/en-US/apis/webfonts/

答案1

您可以透過兩種方法在您的網站中嵌入 Ubuntu 字體 - 使用 Google 字體目錄（首選）或使用@font-faceCSS 聲明並手動轉換字體。

使用Google網頁字體

現在您可以使用 Ubuntu 字體作為 Google 網頁字體。這將使過程變得更加簡單。這部分答案大部分內容來自斯萊登的回答。

為什麼使用 Google Font API 是首選方法？

使用 Google Font API 是一個很好的建議，因為它允許網頁字體在所有現代瀏覽器上自動工作，而不必擔心細節。使用字體 API 意味著訪客將始終看到最新的自動更改字體版本。

如何使用 Google 字體 API？

自 2010 年 12 月 21 日起，Ubuntu 字體系列現已包含在 Google Font API 中並可透過 Google Font API 進行部署，請造訪：

你可以閱讀Google 網頁字體發布關於新聞，然後：

  1. 開啟 Google 字體目錄：「Ubuntu - 使用此字體“ 頁

  2. 勾選組合重量和样式網頁所需的常規、斜體、粗體和粗體斜體。

    替代文字

  3. 如果預設不正確，請選擇語言/文字組合您需要：帶有英語範例的俄語網站可能會使用“西里爾語，拉丁語”。

    替代文字

  4. 在 HTML 頁面或範本<link>之間新增給定標籤，並在.<head> ... </head><style> ... </style><head>

    例如，如果您正在建立俄語/英語混合網站並希望使用該字體作為所有文字的預設字體，則可以在標籤之間添加以下程式碼<head>：

    <link href='http://fonts.googleapis.com/css?family=Ubuntu&subset=cyrillic,latin' rel='stylesheet' type='text/css' />
<style type="text/css" >
    body {
        font-family : 'Ubuntu', sans-serif;
    }
</style>

筆記：

“拉丁語”是腳本英語以及許多其他歐洲和非洲語言都是用這種語言書寫的。

「子集化」透過僅發送某些語言的字元來優化字體文件，每個字體約為 44 kB。目前顯示的 168 kB 數字適用於作為單一 Web 字型下載的所有 1,200 多個字形，而且單一網站不需要大多數字形。

Ubuntu 字型檔案會自動轉換為適合不同瀏覽器的正確格式；根據品牌和版本，所需的格式為WOFF、EOT、SVG或TTF。 CSS 的正確組合針對每個頁面請求，並神奇地解決了這個難題。

使用@font-face

您可以透過以下方式嵌入 Ubuntu 字體轉換他們到WOFF字體。然後，您可以使用 CSS @font-face 聲明來嵌入它們。字體（.ttf 檔案）可以在 中找到/usr/share/fonts/truetype/ubuntu-font-family。

例如，要使用 Ubuntu Regular 字體（轉換為 WOFF 檔案 Ubuntu-R.woff），請使用下列 CSS 程式碼：

@font-face
{
    font-family : "Ubuntu-R";
    src: url('Ubuntu-R.woff');
}

對於 Ubuntu Bold 來說也是如此：

 @font-face
{
    font-family : "Ubuntu";
    src: url('Ubuntu-B.woff');
    font-weight : bold;
}

Ubuntu 斜體：

@font-face 
{
    font-family : "Ubuntu";
    src: url('Ubuntu-I.woff');
    font-style : italic;
}

Ubuntu 粗體斜體：

@font-face
{
    font-family : "Ubuntu";
    src: url('Ubuntu-BI.woff');
    font-weight : bold;
    font-style : italic;
}

這一點得到了大家的支持最近使用的瀏覽器。

注意事項

請記住，某些用戶將其瀏覽器設定為使用一組特定的字體，如果使用自訂字體可能會感到惱火。另外，請閱讀Ubuntu 字型許可證有關如何分發字體的確切條款。

答案2

使用 Google Font API 是一個很好的建議，因為它允許網頁字體在所有現代瀏覽器上自動工作，而不必擔心細節。使用字體 API 意味著訪客將始終看到最新的自動更改字體版本。

自 2010 年 12 月 21 日起，Ubuntu 字體系列現已包含在 Google Font API 中並可透過 Google Font API 進行部署，請造訪：

你可以閱讀Google 網頁字體發布關於新聞，然後：

  1. 開啟 Google 字體目錄：「Ubuntu - 使用此字體“ 頁
  2. 勾選組合重量和样式網頁所需的常規、斜體、粗體和粗體斜體。
  3. 如果預設不正確，請選擇語言/文字組合您需要：帶有英語範例的俄語網站可能會使用“西里爾語，拉丁語”。
  4. 複製並貼上兩行CSS到HTML 頁面或模板的<head> ... </head>和部分。<style>...</style>

筆記：

“拉丁語”是腳本英語以及許多其他歐洲和非洲語言都是用這種語言書寫的。

「子集化」透過僅發送某些語言的字元來優化字體文件，每個字體約為 44 kB。目前顯示的 168 kB 數字適用於作為單一 Web 字型下載的所有 1,200 多個字形，而且單一網站不需要大多數字形。

Ubuntu 字型檔案會自動轉換為適合不同瀏覽器的正確格式；根據品牌和版本，所需的格式為WOFF、EOT、SVG或TTF。 CSS 的正確組合針對每個頁面請求，並神奇地解決了這個難題。

答案3

伺服器端字體渲染（也許更好的「動態字體渲染」）在很長一段時間內一直是一個有趣的問題。

從技術上講，為了讓機器顯示特定字體，它應該已經在本地安裝，這似乎是合乎邏輯的。

另一方面，網頁設計由於必須堅持基本/眾所周知的“網頁字體”而損失了很多。

CSS2.1 透過使用做了一些改進@字體臉規則宣言。
它尚未成為標準，但最終將與 CSS3 一起成為標準。

除此之外，還有一些替代方法，例如：

我希望提供的連結能讓您更了解可以做什麼;-)

相關內容