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

Question

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

3

我正在使用谷歌的字体：Roboto 当我下载zip文件（以便在本地使用它）时，我得到了这个zip文件： enter image description here

但是为了在老版本浏览器上使用这个字体，我需要这种格式：

@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 格式。

有在线工具，但结果不同。

问题：

我在哪里可以获取最可信/正式的格式来使用谷歌字体？

- Royi Namir

1

您可以使用http://www.fontsquirrel.com/来生成字体。该服务简单易用且真实可靠。 - Sarvap Praharanayuthan

@ViswalingaSuryaS 它只有ttf格式。（使用Roboto搜索） - Royi Namir

1

您可以在此页面http://www.fontsquirrel.com/tools/webfont-generator上传字体并生成所有可能的格式 :) - Sarvap Praharanayuthan

3

您可以像这样直接从谷歌导入字体： @import url(http://fonts.googleapis.com/css?family=Roboto); 据称支持IE6+。 - paulitto

@SalmanA 你在哪里看到那些版本的？我只是向你展示了我从谷歌下载的压缩文件。那里只有TTF。 - Royi Namir

显示剩余2条评论

6个回答

1

前往http://www.fontsquirrel.com/tools/webfont-generator

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

这将创建一个包含所有格式和字体面CSS的.zip文件，只需提取并将字体/CSS用于您的网站即可。

- Web Cruzaders

1

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

选项二：

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

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

第三步 -> 选择您想要为正文调用字体的方式（按照以下步骤操作） - 标准 - @import - Javascript

- Jared Michael Czerew

0

来自谷歌：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字体同步

- Gal Samuel

0

谷歌表示当您下载zip文件时：

您无需下载字体即可在网页上使用它。取而代之的是，请参阅“使用”部分。

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

- yunzen

-1

这是一个不错的技巧，我不知道对你是否有帮助，但我总是在我的项目中使用它。只需前往

点击这里

& 在此网站上上传您的字体并单击转换按钮，该网站会自动为您生成eot、svg、woff文件，并提供CSS代码，您只需将该代码复制并粘贴到您的css文件中，并将所有这些文件复制到css文件夹中... 享受吧....

- Anup Karanjkar

1

FontSquirrel在这种情况下经常被提及，但它将每种字体处理为字体系列，使得HML和CSS编码不太方便且不太自然。此外，问题是关于获取“最值得信赖/官方的格式”。 - Jukka K. Korpela

@JukkaK.Korpela 您可以使用自定义样式和字体重量将每个重命名为相同的字体系列... Font Squirrel 在这里是最佳选择... - Mr. Alien

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- LeaveAirykson · Accepted Answer

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

WOFF被FF 3.6+、Chrome 5.0+、Safari 5.1+、IE 9+支持，所以您的现代浏览器都可以使用。请参见caniuse.com

对于旧版浏览器（< IE 9），您只需要eot文件。您可以通过在可以更改用户代理的浏览器中打开谷歌字体CSS文件来获取它。例如，如果您将用户代理更改为ie 7，则样式表将包含指向eot文件的链接。

例如，如果您在chrome中使用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