Google Fonts是一种在网页上使用自定义字体的非常流行的方式。您可以从 Google 库中的数百种开源字体中进行选择,而且它们都是快速且免费的。

问题是,尽管 Google Fonts 可能很方便,但它仍然是第三方依赖项。您网站的每一个新访问者都意味着再次访问 Google 的服务器,获取您希望他们看到的精美字体。Google 表示,他们的 Fonts API“旨在将最终用户数据的收集、存储和使用限制为有效提供字体所需的内容”,1但尽管如此,他们正在跟踪您的访问者,因此您至少需要将 Google 字体包含在您网站的隐私政策中。

有时,去掉第三方跟踪,自己提供字体感觉很好。由于对 WOFF 和 WOFF2 字体格式的广泛支持,这很容易做到。

这是我在最近的一个项目中的做法。

但首先,关于许可

很简单:只有在您获得许可的情况下才将 TTF 转换为 webfont。

在开源许可证(例如SIL OFLApache 2.0)下发布的字体都可以免费使用、修改和重新发布。所以他们很高兴去!

另一方面,大多数商业字体许可证明确禁止作为网络字体发布。这很痛苦,但是嘿,那些设计师必须谋生。

这里有几个地方可以找到非常棒的开源字体:

获取 TTF 文件

您需要从字体的 TTF (TrueType) 文件开始。Google Fonts最近在其网站上的字体系列页面中添加了一个“下载系列”按钮,就像这个,用于 Open Sans。单击该按钮将下载一个 zip 存档,其中包含字体的每种粗细和样式的 TTF 文件。

对于您下载的每个 TTF 文件,我们将创建相应的 WOFF 和 WOFF2 文件。这将为您提供相当好的浏览器支持。

然后,最后,我们将在您站点的 CSS 中引用那些 WOFF 和 WOFF2 字体文件。

让我们开始!

构建 WOFF 文件

WOFF 是一种压缩字体格式,2011 年以后发布的大多数网络浏览器都支持,包括 IE9-IE11。2

您可以使用ttf2woff nodejs 脚本将 TTF 文件转换为 WOFF 文件。在这里,我正在下载脚本,并在OpenSans-Regular.ttf我已经下载的文件上运行它:

git clone --recursive https://github.com/fontello/ttf2woff.git
cd ttf2woff
npm install
./ttf2woff.js OpenSans-Regular.{ttf,woff}

ttf2woff.js需要两个参数 –.ttf要转换的源文件和.woff要创建的目标文件。

为了避免两次写出字体的文件名,我使用了 Bash 快捷方式{ttf,woff}。当命令运行时,Bash 会发现大括号,并将两个参数展开(即:myfont.{ttf,woff}变成myfont.ttf myfont.woff)。

构建 WOFF2 文件

WOFF2 是一种更高效的压缩格式,几乎所有现代浏览器都支持,包括 Edge (14+)、Firefox (39+)、Chrome (36+) 和 Safari (12+)。3

Google 在其woff2 库中维护了一个用于创建 WOFF2 文件的命令行脚本:

git clone --recursive https://github.com/google/woff2.git
cd woff2
make clean all
./woff2_compress OpenSans-Regular.ttf

woff2_compress自动创建一个.woff2与输入.ttf文件同名的文件。

编写你的 CSS

现在,您可以在 Web 目录中的某处弹出.woff.woff2文件,并使用@font-faceCSS 中的规则集引用它们。

这是我以两种样式(常规和斜体)和两种粗细(常规和粗体)提供 Open Sans 的示例:

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Open Sans Regular'), local('OpenSans-Regular'), url('/fonts/open-sans-regular.woff') format('woff'), url('/fonts/open-sans-regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: local('Open Sans Regular'), local('OpenSans-Regular'), url('/fonts/open-sans-italic.woff') format('woff'), url('/fonts/open-sans-italic.woff2') format('woff2');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Open Sans Regular'), local('OpenSans-Regular'), url('/fonts/open-sans-bold.woff') format('woff'), url('/fonts/open-sans-bold.woff2') format('woff2');
}

@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: local('Open Sans Regular'), local('OpenSans-Regular'), url('/fonts/open-sans-bold-italic.woff') format('woff'), url('/fonts/open-sans-bold-italic.woff2') format('woff2');
}

包含这些local()功能是一种很好的做法,这样,如果用户已经在他们的设备上安装了字体,则使用该本地副本,而不是您的 webfont 版本,从而节省一些宝贵的字节。但是,如果您不知道字体名称和 Postscript 名称,则可以忽略这一点。

  1. https://developers.google.com/fonts/faq#what_does_using_the_google_fonts_api_mean_for_the_privacy_of_my_users  
  2. https://caniuse.com/#feat=woff  
  3. https://caniuse.com/#feat=woff2  

转自 https://zarino.co.uk/post/self-hosting-google-fonts/

订阅评论
提醒
guest

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

0 评论
内联反馈
查看所有评论

一柱擎天也打不到太阳,钻地三尺也挖不倒金矿,小弟弟只是欲望,不是真相。

京ICP备14029665号-3

                 

使用您的凭据登录

    

忘记密码?

创建帐号