☰

使用 Google Webfonts

tag-icon • tag-icon websites license ubuntu-font-family
使用 Google Webfonts

考虑以下许可证：

如何在任何网站上使用 Ubuntu 字体系列而不让用户安装它？
是否有机会将其与以下工具一起使用：http://code.google.com/intl/en-US/apis/webfonts/

答案1

有两种方法可以将 Ubuntu 字体嵌入到您的网站 - 使用 Google 字体目录（首选）或使用 CSS@font-face声明并手动转换字体。

使用 Google Webfonts

现在，您可以将 Ubuntu 字体用作 Google Web 字体。这将使流程变得简单得多。本部分答案的大部分内容来自sladen 的回答。

为什么使用 Google Font API 是首选方法？

使用 Google Font API 是一个很好的建议，因为它允许 Web 字体自动在所有现代浏览器上运行，而无需担心细节。使用字体 API 意味着访问者将始终看到最新的字体版本。

如何使用 Google 字体 API？

自 2010 年 12 月 21 日起，Ubuntu 字体系列现已包含在 Google 字体 API 中并可从中部署，请访问：

你可以阅读Google Web Font 发布关于新闻，然后：

  1. 打开 Google 字体目录：“Ubuntu - 使用此字体“ 页

  2. 勾选组合重量和款式您的网页所需的常规、斜体、粗体和粗斜体字体有多种。

    替代文本

  3. 如果默认值不正确，请选择语言/文字组合您需要：带有英语示例的俄语网站可能会使用“西里尔文、拉丁文”。

    替代文本

  4. 在您的 HTML 页面或模板中添加给定的<link>标签，并在您的标签<head> ... </head>之间添加适当的 CSS 代码。<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 数字是针对所有 1,200 多个字形作为单个网络字体下载的——大多数字形对于单个网站来说都不是必需的。

Ubuntu 字体文件会自动转换为适合不同浏览器的正确格式；根据品牌和版本，所需格式为、或WOFF。EOT正确的 CSS 组合特定于每个页面请求，并神奇地解决了这个难题。SVGTTF

使用@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 是一个很好的建议，因为它允许 Web 字体自动在所有现代浏览器上运行，而无需担心细节。使用字体 API 意味着访问者将始终看到最新的字体版本。

自 2010 年 12 月 21 日起，Ubuntu 字体系列现已包含在 Google 字体 API 中并可从中部署，请访问：

你可以阅读Google Web Font 发布关于新闻，然后：

  1. 打开 Google 字体目录：“Ubuntu - 使用此字体“ 页
  2. 勾选组合重量和款式您的网页所需的常规、斜体、粗体和粗斜体字体有多种。
  3. 如果默认值不正确，请选择语言/文字组合您需要：带有英语示例的俄语网站可能会使用“西里尔文、拉丁文”。
  4. 复制并粘贴两行 CSS放入您的 HTML 页面或模板的<head> ... </head>和部分中。<style>...</style>

笔记：

“拉丁”是脚本英语以及许多其他欧洲和非洲语言都是用它书写的。

“子集化”通过仅发送特定语言的字符来优化字体文件，每个字体大约 44 kB。目前显示的 168 kB 数字是针对所有 1,200 多个字形作为单个网络字体下载的——大多数字形对于单个网站来说都不是必需的。

Ubuntu 字体文件会自动转换为适合不同浏览器的正确格式；根据品牌和版本，所需格式为、或WOFF。EOT正确的 CSS 组合特定于每个页面请求，并神奇地解决了这个难题。SVGTTF

答案3

服务器端字体渲染（可能更好的是“动态字体渲染”）一直是一个有趣的问题。

从技术上讲，为了让机器显示特定的字体，该字体应该已经在本地安装好了，这似乎是合乎逻辑的。

另一方面，如果网页设计必须坚持使用基本/知名的“网页字体”，那么就会损失惨重。

CSS2.1 通过使用@font-face规则声明。
它尚未成为标准，但它最终会随着 CSS3 而成为标准。

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

我希望提供的链接可以让您更好地了解可以做什么;-)

相关内容