因此,我在WordPress网站上工作,并且在每个页面上我都有一个H1标签作为该页面的标题。我使用@ font-face使用特殊字体,并且在每种浏览器的Windows上都可以正常工作,但是当我切换到Mac时,它不会显示h1标签,而只是空白。我已经在多个Mac上的Safari和Chrome浏览器中对此进行了测试,但不适用于其中任何一个。如果我更改字体以说Arial,则效果很好,如果我设置为后备字体,则该字体不起作用。如果我更改h1,h2,h3标签以使用NorthBergen-Light,则效果很好,只是NorthBergen无法正常工作,并且两者的代码完全相同。在我的研究中,我发现有些人说当他们删除所有引号时他们已经取得了成功,但是当我这样做时,一切都破了。我不知道为什么NorthBergen-Light效果很好,而NorthBergen却不行。
@font-face {
font-family: 'NorthBergen';
font-style: normal;
src: url('//www.mywebsite.com/op/wp-content/uploads/useanyfont/141009064915ufonts.com_northbergen-regular.eot');
src: local('NorthBergen'), url('//www.mywebsite.com/op/wp-content/uploads/useanyfont/141009064915ufonts.com_northbergen-regular.eot') format('embedded-opentype'), url('//www.mywebsite.com/op/wp-content/uploads/useanyfont/141009064915ufonts.com_northbergen-regular.woff') format('woff');
}
@font-face {
font-family: 'NorthBergen-Light';
font-style: normal;
src: url('//www.mywebsite.com/op/wp-content/uploads/useanyfont/141009083525ufonts.com_northbergen-light-opentype.eot');
src: local('NorthBergen-Light'), url('//www.mywebsite.com/op/wp-content/uploads/useanyfont/141009083525ufonts.com_northbergen-light-opentype.eot') format('embedded-opentype'), url('//www.mywebsite.com/op/wp-content/uploads/useanyfont/141009083525ufonts.com_northbergen-light-opentype.woff') format('woff');
}
.services .services-inside .services-title{
font-family: 'NorthBergen' !important;
}
h1, h2, h3{
font-family: 'NorthBergen', 'Times New Roman', 'Times', 'serif' !important;
}
footer.main-footer .widget .widget-title{
font-family: 'NorthBergen-Light' !important;
}
h5, h6, p, blockquote, li, a, .main-container, h4.widget-title, .widget-title{
font-family: 'NorthBergen-Light' !important;
}
所以我通过使用fontsquirrel并获取所有文件并将它们放在我的FTP中并更改css文件的外观来使其工作。
@font-face {
font-family: 'NorthBergen';
font-style: normal;
src: url('ufonts.com_northbergen-regular-opentype-webfont.eot');
src: url('ufonts.com_northbergen-regular-opentype-webfont.eot?#iefix') format('embedded-opentype'),
url('ufonts.com_northbergen-regular-opentype-webfont.woff2') format('woff2'),
url('ufonts.com_northbergen-regular-opentype-webfont.woff') format('woff'),
url('ufonts.com_northbergen-regular-opentype-webfont.ttf') format('truetype'),
url('ufonts.com_northbergen-regular-opentype-webfont.svg#northbergenregular') format('svg');
}
最佳答案
对Wordpress一无所知,但您可能需要对所有浏览器进行一些字体转换:
@font-face {
font-family: 'Min_font';
src: url('../fonts/Min_font/Min_font.eot') format('embedded-opentype'); /* IE9 + later */
src: url('../fonts/Min_font/Min_font.eot?#iefix') format('embedded-opentype'), /* IE6 to IE8 */
url('../fonts/Min_font/Min_font.woff') format('woff'), /* Newer browsers */
url('../fonts/Min_font/Min_font.ttf') format('truetype'), /* Safari og iOS, Chrome, Android, Firefox and Opera except Opera Mini */
url('../fonts/Min_font/Min_font.svg#Min_font + regular, italic, bold) format('svg'); /*IE og iOS earlier than version 5*/
}
尝试fontsquirrel:http://www.fontsquirrel.com/tools/webfont-generator
关于ios - @ Font-face在IOS上不起作用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/27158639/