问题
In a previous question of mine it was pointed out to me that "woff2" format doesn't work on Microsoft Edge. So I have to use an alternative syntax of @font-face if I want my website to look good in Microsoft Edge.
Original 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');}
Suggested 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');
}
So what I am trying to do is to find all other formats (truetype, woff etc) for 'Dosis' for example..
I used : http://webfonts.azurewebsites.net/?fontname=Dosis It gives me only the 400 weight version of Dosis.
Do you know other ways so I can have the correct versions of Dosis in the necessary formats?
回答1:
You can also use google font following way
<link href='https://fonts.googleapis.com/css?family=Dosis:400' rel='stylesheet' type='text/css'>
Change the font weight according to your choose like href='https://fonts.googleapis.com/css?family=Dosis:200'
In that case you need not to worry about different format. just use font-family:'Dosis';
in your style.
来源:https://stackoverflow.com/questions/34453010/finding-all-other-formats-for-a-google-font-beside-woff2