在我的上一个问题中,曾向我指出“ 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”的所有其他格式(真型,woff等)。

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

您是否知道其他方式,以便我能够以必要的格式获得正确的Dosis版本?

最佳答案

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

<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';

10-04 14:12