我使用FontForge创建了一些图标,并且这些图标在Safari之外的所有现代浏览器中均可使用。是什么导致Safari成为唯一不显示字体的浏览器?
这是正在使用的SCSS:
@font-face {
font-family: 'MyFont';
src: url('/assets/fonts/MyFont.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.my-font-icon {
font-family: 'MyFont';
display: inline-block;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-rendering: auto;
line-height: 1;
-webkit-font-smoothing: antialiased;
&:before {
font-family: 'MyFont';
display: inline-block;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-rendering: auto;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
&.my-font-questions:before {
content: "\0001";
}
&.my-font-chevron-left:before {
content: "\0002";
}
&.my-font-close:before {
content: "\0003";
}
}
Safari需要TrueType / ttf字体版本,实际上您应该包括几种不同的类型,而不仅仅是woff2,这是最现代的类型。这是CSS Tricks文章here中的示例列表,浏览器找到它理解的字体并呈现该字体:
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
FontForge应该为您提供其他字体类型,但是如果没有,您需要转到FontSquirrel进行渲染(如果您具有这样做的许可和许可):