谷歌字体-窗口

在Windows上使用谷歌字体是否存在一些已知的错误？

<link href='http://fonts.googleapis.com/css?family=Raleway:400,300,700,500' rel='stylesheet' type='text/css'>

/* RALEWAY */
/* latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 300;
  src: url(http://fonts.gstatic.com/s/raleway/v9/-_Ctzj9b56b8RgXW8FAriQsYbbCjybiHxArTLjt7FRU.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;

}

Font Raleway不在任何浏览器上显示，只在Chrome上工作。

CSS：

.s11-col-title span{font-weight:300;font-family:"Raleway";font-size:42px;letter-spacing: -2px;}

也许FireFox和IE不支持woff2？

在不了解您尝试了什么的情况下，我会阅读如何实际实现它。这是Mozilla开发者网络的链接。

Mozilla字体面

最重要的是，您需要将它添加到HTML元素中。

HTML元素：

<h2>New Font is Used</h2>

CSS调用：

h2 { font-family: Raleway; }

更新：

您的字体调用不正确。

@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 500;
    src: local('Raleway Medium'), local('Raleway-Medium'), url(http://fonts.gstatic.com/s/raleway/v9/CcKI4k9un7TZVWzRVT-T8xsxEYwM7FgeyaSgU71cLG0.woff) format('woff');

}

这里有一个例子：Code Pen

更新2:

以下是链接调用应该是什么样子的

<link href="http://fonts.googleapis.com/css?family=Raleway:400,300,700,500" rel="stylesheet" type="text/css" />

这里是另一个例子：代码笔例子#2

删除你的手动粘贴呼叫，只需使用谷歌的代码。不要使用你的代码，这是错误的。

我质疑您为什么首先需要@font face。谷歌字体可以帮你做到这一点。你只需要在你的文档，然后在类声明中使用字体名称：

<!DOCTYPE html>
  <html>
    <head>
      <link href='http://fonts.googleapis.com/css?family=Raleway:400,300,700,500' rel='stylesheet' type='text/css'>
    ...

然后在样式表中：

.s11-col-title span {
    font-weight:300;
    font-family:"Raleway";
    font-size:42px;
    letter-spacing: -2px;
}

你应该很乐意去。。。

相关内容

最新更新

热门标签：