使用CSS与谷歌字体 - 所有格式？

Question

我使用的是Google的字体：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格式。

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

问题：

我如何/在哪里可以获得谷歌字体最可靠/官方的格式？

Answer 1

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

在FF 3.6 +，Chrome 5.0 +，Safari 5.1 +，IE 9+中支持WOFF，因此您可以使用现代浏览器。 as seen on caniuse.com

就旧版浏览器（＆lt; IE 9）而言，您只需要eot文件。你可以通过在浏览器中打开谷歌字体css文件来获得它，你可以在其中更改useragent。例如，如果将useragent更改为ie 7，则样式表将包含指向eot文件的链接。

例如，如果您使用useragent打开此链接，即Chrome中的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

Answer 2

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

上传您的字体文件（.ttf）＆gt;选择专家＆gt;点击协议＆gt;下载你的工具包。

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

Answer 3

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

选项二：

第一步 - ＆gt; https://www.google.com/fonts/specimen/Roboto

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

第三步 - ＆gt;选择您想要为自己的身体调用字体的方式（按照步骤操作）    - 标准    - @import    - Javascript

Answer 4

Google在您下载zip时说：

  

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

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

Answer 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字体同步

Answer 6

这是一个很好的技巧，我不知道它对你有帮助，但我总是对我的项目做这件事..只是去

Click here

＆安培;在此网站上传您的字体＆amp;点击转换按钮，此网站会自动为您提供eot, svg, woff个文件。这个网站也提供你的css代码你只需复制＆amp;将该代码粘贴到css file＆amp;复制css文件夹中的所有文件... 享受....