我在网站上嵌入的谷歌地图上渲染字体“Roboto”时遇到了一个大问题： 去年我们决定在我们的网站上使用 Roboto 字体来渲染我们的头部标题和小插图。
它是希腊语的网站，所以我加载了带有希腊语扩展的字体：
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700|Roboto:900|Tinos:700&subset=greek-ext,latin-ext);
我现在的问题是：当我的页面加载时，它确实加载了正确的字体，但是当它进入嵌入式谷歌地图时，我的字体丢失了......
我猜谷歌地图在不支持希腊语言的情况下加载了“roboto”字体并覆盖了我的命令......我说的对吗？
有人可以帮忙吗？
【问题讨论】：
标签： google-maps fonts
我在使用完全相同的字体时遇到了同样的问题。当谷歌地图加载他们的字体时，我以前的所有样式都改变了。我决定使用简单的解决方案。当您有您的网络字体链接时，例如：
<link href='http://fonts.googleapis.com/css?family=Roboto:300&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
它产生：
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: local('Roboto Light'), local('Roboto-Light'),
url(http://themes.googleusercontent.com/static/fonts/roboto/v10/Pru33qjShpZSmG3z6VYwnT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
如您所见，它具有 font-family 属性。例如，我决定将其更改为“RobotoL”：
@font-face {
font-family: 'RobotoL';
font-style: normal;
font-weight: 300;
src: local('Roboto Light'), local('Roboto-Light'),
url(http://themes.googleusercontent.com/static/fonts/roboto/v10/Pru33qjShpZSmG3z6VYwnT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
然后在你的文档中使用它，例如：
body {
font-family: 'RobotoL';
font-weight......
}
那么就没有必要使用谷歌生成的导入或链接，而是自己编写。 3.14版以后不再有Google Maps Roboto字体问题了）
在 Google 插入这个长长的 .woff url 后，提取它只有一个棘手的部分，但您可以使用每个现代浏览器开发工具（Firebug 等）轻松完成。我认为它也适用于 Condensed 和其他 Roboto 版本。
【讨论】：
好的，非常感谢您的解决方法！
所以，我从 fontsquirrel.com 下载了我使用的字体； Roboto，感谢 Christian Robertson，是一种免费的网络字体 ;)
我留下了 fontsquirrel 建议的 css 代码（这里是特定类型的示例）：
@font-face {
font-family: 'robotobold';
src: url('/fonts/Roboto-Bold-webfont.eot');
src: url('/fonts/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/Roboto-Bold-webfont.woff') format('woff'),
url('/fonts/Roboto-Bold-webfont.ttf') format('truetype'),
url('/fonts/Roboto-Bold-webfont.svg#robotobold') format('svg');
font-weight: 700;
font-style: normal;
}
如你所说，改变了所有对字体的调用：
.class{font-family: 'robotobold', sans-serif;}
它正在与谷歌地图一起工作，谢谢！
【讨论】：