Question

我在渲染字体方面遇到了很大的问题＆＃39; Roboto＆＃39;在我网站上的嵌入式谷歌地图上：去年我们决定在我们的网站上使用Roboto字体来渲染我们的头像和小插图。

该网站是希腊语，所以我加载了希腊语扩展的字体：

@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700|Roboto:900|Tinos:700&subset=greek-ext,latin-ext);

我现在的问题是：当我的页面加载时，它确实加载了字体，但是当它嵌入谷歌地图时，我的字体就丢失了......

我猜google地图会加载“roboto”＃39;没有希腊语支持的字体，并覆盖了我的命令......我是对的吗？

有人可以帮忙吗？

Answer 1

我对完全相同的字体有同样的问题。当Google地图加载了他们的字体后，我之前的所有样式都发生我决定使用简单的解决方案。当您拥有Web字体链接时，例如：

    <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＆＃39;：

    @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......
}

然后就不需要使用Google生成的导入或链接，而是编写自己的。版本3.14之后没有Google Maps Roboto字体问题了）

在谷歌插入之后，只有一个棘手的部分可以提取这个长.woff网址，但你可以使用每个现代浏览器开发工具（Firebug等）轻松完成。我认为它适用于Condensed和其他Roboto版本。

Answer 2

好的，非常好的解决方法！所以，我从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;}

它正在使用Google地图，而不是x！

谷歌地图Roboto字体在希腊语网站上使用Roboto

2 个答案: