Question

我试图在没有外部链接到css的情况下使用Google字体，我只是复制并通过规则之子我的css就像这样

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTRampu5_7CjHW5spxoeN3Vs.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;
}

但Safari似乎没有得到它......

Answer 1

好的，我自己找到了解决方案

woff2与Safari不兼容所以我使用了

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
}

Answer 2

我新加入了stackoverflow，所以不确定正确的回答方式。

我也遇到了类似的问题，并且看到safari没有下载woff2格式文件，如果以下格式提到的话。

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTRampu5_7CjHW5spxoeN3Vs.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;

}

但是，如果我也以woff2格式添加latin-ext子集文件，那么googleapis正在内部下载woff格式。这解决了我的问题。

希望这有帮助。

Answer 3

在我的情况下，我只使用了一个变体，即Zilla Slab的斜体，Chrome显示的斜体版本没有问题，但是Safari要求我显式声明font-style：italic;。才能正确显示...

font-family：“ Zilla Slab”，无衬线； font-weight：400; font-style：italic;

CSS Google font-face无法在Safari上运行？

3 个答案: