css google font如何下载和嵌入css以避免加载时间过慢

Question

我正在使用yaml css框架。我一次又一次访问我的网页时收到以下消息：我的网页正在尝试下载谷歌字体。

此页面是一个内部网页，互联网可能非常慢，所以我希望阻止这种情况发生。我想我需要做的是下载字体并将其放在我的CSS中。任何人都可以指导我如何做到这一点，我还可以在哪里抓取谷歌字体？

由于

Answer 1

查找字体的好地方是http://www.google.com/fonts

也许你可以从这里下载Droid Sans：http://www.fontsquirrel.com/fonts/Droid-Sans如果TTF对你没问题。

至于字体，如果你想把字体变成全局字体，你可以简单地做：

@font-face {
  font-family: DroidSans;
  src: url('location/DroidSans.ttf'),
       url('location/DroidSans.eot'); /* IE9 */
}

html * {
   font-family: DroidSans;
}

如果你想支持IE9 - 我认为有足够的ttf来在线转换器。

Answer 2

将它放入CSS文件中。显然，更改文件的名称以匹配您使用的文件名称。

/* Webfont: Open Sans Regular */
@font-face {
    font-family: 'open_sansregular';
    src: url('path/to/fonts/OpenSans-Regular-webfont.eot');
    src: url('path/to/fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('path/to/fonts/OpenSans-Regular-webfont.woff') format('woff'),
         url('path/to/fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('path/to/fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

p {
  font-family:'open_sansregular', Verdana, Arial, sans;
}

您可以在互联网上下载字体，但除非您购买许可证，否则请确保它们对公众开放。

Answer 3

您可以直接从Google字体下载字体文件。

然后在您的服务器上托管文件。

然后使用@font-face将其导入您的网页。

然后像CSS中的任何其他字体一样使用它：font-family: 'Droid Sans'

Answer 4

仅引用TTF时要小心。要覆盖大多数浏览器，您需要引用5种不同的字体格式，即TTF，EOT，WOFF，WOFF2和SVG。从Google字体网站，您只能下载TTF。

当您从Google字体网站中添加CSS文件时，Google负责检测用户代理，并以正确的字体格式提供CSS规则。要下载所有字体格式，您需要使用不同的浏览器或伪造用户代理，大多数浏览器都可以这样做。

像http://www.localfont.com/这样的便利工具可以为您解决此问题。您可以下载所有可能的字体格式以及X-Browser CSS定义。