css - 在 "woff2"旁边查找 Google 字体的所有其他格式

Question

在我之前的一个问题中，有人向我指出“woff2”格式在 Microsoft Edge 上不起作用。因此，如果我希望我的网站在 Microsoft Edge 中看起来不错，我必须使用 @font-face 的替代语法。

原始 CSS

@font-face{font-family:'Dosis';font-style:normal;font-weight:200;src:local('Dosis ExtraLight'), local('Dosis-ExtraLight'), url(http://fonts.gstatic.com/s/dosis/v4/RPKDmaFi75RJkvjWaDDb0vesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');}
@font-face{font-family:'Dosis';font-style:normal;font-weight:700;src:local('Dosis Bold'), local('Dosis-Bold'), url(http://fonts.gstatic.com/s/dosis/v4/22aDRG5X9l7obljtz7tihvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');}

建议的 CSS

@font-face {
    font-family: 'MyFontFamily';
    src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
         url('myfont-webfont.woff') format('woff'), 
         url('myfont-webfont.ttf')  format('truetype'),
         url('myfont-webfont.svg#svgFontName') format('svg');
    }

所以我想做的是为“Dosis”找到所有其他格式(truetype、woff 等)..

我用过:http://webfonts.azurewebsites.net/?fontname=Dosis它只给我 400 重量版本的 Dosis。

您是否知道其他方法，以便我可以获得必要格式的正确版本的 Dosis？

Answer 1

您也可以按照以下方式使用谷歌字体

<link href='https://fonts.googleapis.com/css?family=Dosis:400' rel='stylesheet' type='text/css'>

根据您的选择更改字体粗细，如 href='https://fonts.googleapis.com/css?family=Dosis:200'

在那种情况下，您不必担心不同的格式。只需在您的样式中使用 font-family:'Dosis';。