使用带有谷歌字体的 CSS - 所有格式？答案

【问题标题】：Using CSS with google font - all formats?使用带有谷歌字体的 CSS - 所有格式？
【发布时间】：2014-05-20 17:23:32
【问题描述】：

我使用的是谷歌的字体：Roboto

当我下载 zip 文件时（为了在本地使用它） - 我得到了这个 zip 文件：

但是为了使用这个字体with older browsers我需要这个格式：

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

但正如您所见 - 我没有 eot 、 woff 、 svg 格式。

有在线工具，但它们产生不同的结果。

问题：

如何/在哪里可以获得最受信任/官方的 google 字体格式？

【问题讨论】：

您可以使用fontsquirrel.com 来生成字体。该服务直截了当且真诚。
@ViswalingaSuryaS 它only has ttf。（使用机器人搜索）
你可以在这个页面fontsquirrel.com/tools/webfont-generator上传你的字体并生成所有可能的格式:)
你应该可以直接从谷歌中包含它们@import url(http://fonts.googleapis.com/css?family=Roboto);他们声称支持 IE6+
@paulitto 我需要这些字体在本地。

标签： html css fonts cross-browser font-face

【解决方案1】：

选项一：http://everythingfonts.com/font-face - 使用它上传您的文件，它将转换为跨浏览器@font-face。

选项二：

第一步 -> https://www.google.com/fonts/specimen/Roboto

第二步 -> 在 Google 字体中打开 Roboto（右上角链接）

第三步 -> 选择你想为你的身体调用字体的方式（按照步骤） - 标准 - @进口 - Javascript

【讨论】：

【解决方案2】：

就在三天前，我遇到了同样的问题。我是这样解决的：

FF 3.6+、Chrome 5.0+、Safari 5.1+、IE 9+ 支持 WOFF，因此涵盖了您的现代浏览器。 as seen on caniuse.com

就旧版浏览器（

例如，如果您在 chrome 中使用 useragent ie 7 打开此链接：Roboto Google Font css file

它会输出这个：

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(http://themes.googleusercontent.com/static/fonts/roboto/v10/5YB-ifwqHP20Yn46l_BDhA.eot);
  src: local('Roboto Regular'), local('Roboto-Regular'), url(http://themes.googleusercontent.com/static/fonts/roboto/v10/5YB-ifwqHP20Yn46l_BDhA.eot) format('embedded-opentype'), url(http://themes.googleusercontent.com/static/fonts/roboto/v10/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff');
}

所以只需从 src 中获取 eot 文件 url： http://themes.googleusercontent.com/static/fonts/roboto/v10/5YB-ifwqHP20Yn46l_BDhA.eot

【讨论】：

这是高手。 :P 有趣的是，我没有意识到 EOT 的这一点，所以我在试图为他找到一种方法时忽略了它。
您不需要对所有浏览器版本都这样做。你已经有了 ttf 文件。除了 ie（概述：caniuse.com/ttf）之外的所有浏览器都支持 ttf，因为 ie 您可以通过将用户代理更改为任何 ie 版本来获取 eot 文件。或者如果你在windows下工作，你可以通过ie访问链接并获取eot文件。
svg 怎么样？还有 ttf 吗？
如果您有 ttf 文件，则不需要 svg。正如你所说，你已经有了它们，不是吗？只需像我解释的那样下载 eot 文件，就可以开始了。
@LeaveAirykson - SVG 适用于较旧的 IOS 浏览器，因此如果您想支持这些浏览器，您确实需要它。 WOFF 是新兴的标准，因此将其也包括在内可能是一个好主意，以便向前兼容。浏览器只会下载其中一种格式，因此将它们全部放在您的服务器上没什么大不了的。

【解决方案3】：

转到http://www.fontsquirrel.com/tools/webfont-generator

上传您的字体文件 (.ttf) > 选择专家 > 点击协议 > 下载您的工具包。

这会将您上传的文件的所有格式使用字体 CSS 创建为 .zip 文件。只需提取并使用您的字体/CSS。

【讨论】：

【解决方案4】：

当您下载 zip 时，Google 会说：

您无需下载字体即可在网页上使用它。相反，请参阅“使用”部分。

https://www.google.com/fonts#UsePlace:use/Collection:Roboto:400,400italic,700,700italic

【讨论】：

【解决方案5】：

来自谷歌：https://www.google.com/fonts#UsePlace:use/Collection:Roboto

HTML 的标准包含：

<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

集成到您的 CSS 中：

font-family: 'Roboto', 'sans-serif';

顺便说一句，您可以使用 http://www.fonts.com/web-fonts/google 将您的桌面与 Google 字体同步

【讨论】：

【解决方案6】：

这是一个不错的技巧，我不知道它是否对你有用，但我总是对我的项目做这件事.. 去吧

Click here

并在本网站上上传您的字体并单击转换按钮本网站自动为您提供eot, svg, woff 文件并且本网站还为您提供 css 代码您只需将该代码复制并粘贴到您的 css file 并将所有这些文件复制到css文件夹... 享受......

【讨论】：

FontSquirrel 在这样的上下文中最常被提及，但它将每种字体都作为一个字体系列来处理，这使得 HML 和 CSS 编码变得不那么方便和不自然。此外，问题在于获得“最受信任/官方的格式”。
@JukkaK.Korpela 您可以使用相同的字体系列重命名每个字体，并自定义样式和字体粗细... Font Squirrel 是这里的最佳选择...