css 修复chrome中的字体渲染

Posted 2021-05-13

/* http://www.dev-metal.com/fix-ugly-font-rendering-google-chrome */

/* this is how a font-face rule usually looks like */
@font-face {
    font-family: 'MyWebFont';
        src: url('webfont.eot'); /* IE9 Compat Modes */
        src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	     url('webfont.woff') format('woff'), /* Modern Browsers */
	     url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
	     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

/* the fix ! simply ADD this block BELOW the above block */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'MyWebFont';
            src: url('webfont.svg#svgFontName') format('svg');
    }
}