@字体不适用于IOS
所以我在WordPress网站上工作,在每个页面上,我都有一个H1标签作为该页面的标题。我使用了一种使用@font-face的特殊字体,它在每种浏览器的windows上都非常有效,但当我切换到mac时,它不会显示h1标记,只是空白。我已经在safari和chrome的多个mac上进行了测试,但在任何mac上都不起作用。如果我改变字体,比如说Arial,它工作得很好,如果我设置了一个后退字体,它就不工作了。如果我把h1,h2,h3标签改成使用NorthBergen Light,效果很好,只是NorthBergen不起作用,它们的代码完全相同。在我的研究中,我发现有些人说,当他们删除所有的引号时,他们已经成功了,但当我这样做的时候,它只是打破了一切。我不明白为什么NorthBergen Light工作得很好,但NorthBergen没有@字体不适用于IOS,ios,css,wordpress,font-face,Ios,Css,Wordpress,Font Face,所以我在WordPress网站上工作,在每个页面上,我都有一个H1标签作为该页面的标题。我使用了一种使用@font-face的特殊字体,它在每种浏览器的windows上都非常有效,但当我切换到mac时,它不会显示h1标记,只是空白。我已经在safari和chrome的多个mac上进行了测试,但在任何mac上都不起作用。如果我改变字体,比如说Arial,它工作得很好,如果我设置了一个后退字体,它就不工作了。如果我把h1,h2,h3标签改成使用NorthBergen Light,效果很好,只是Nor
@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:我对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:在更改路径后开始为我工作 松鼠给的路没有/ 添加后,它可以工作:
@font-face {
font-family: 'montserratblack';
src: url('./montserrat-black-webfont.woff2') format('woff2'),
url('./montserrat-black-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
在改变路径后开始为我工作 松鼠给的路没有/ 添加后,它可以工作:
@font-face {
font-family: 'montserratblack';
src: url('./montserrat-black-webfont.woff2') format('woff2'),
url('./montserrat-black-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
我意识到这个问题是几年前提出来的,但我在想出解决方案时把这条线索作为参考,所以我想在这里与大家分享一下,以避免其他人将来受挫- 对我来说,除了我的iphone,所有的字体都正常工作,我要做的是删除字体代码svg部分的ID,并将其保留为上传的.svg文件。 例如,在上述代码中,svg部分的内容如下:
url('../fonts/Min_font/Min_font.svg, italic, bold) format('svg');
这意味着我删除了它和它后面的ID
我尝试了其他的一切——fontsquirrel、transfonter,以多种方式更改了url路径。
这是唯一有效的方法——我花了一周时间才弄明白:0
这可能也是唯一对你有效的方法。我意识到这个问题是几年前提出来的——但我在想出解决方案时使用了这条线索作为参考,所以我想我会在这里分享,以避免其他人将来受挫- 对我来说,除了我的iphone,所有的字体都正常工作,我要做的是删除字体代码svg部分的ID,并将其保留为上传的.svg文件。 例如,在上述代码中,svg部分的内容如下:
url('../fonts/Min_font/Min_font.svg, italic, bold) format('svg');
这意味着我删除了它和它后面的ID
我尝试了其他的一切——fontsquirrel、transfonter,以多种方式更改了url路径。
这是唯一有效的方法——我花了一周时间才弄明白:0
这可能也是唯一对你有效的方法。好吧,在提出这个问题之前,我看了一下fontsquirrel,它显示的格式基本上就是我所拥有的,但在使用fontsquirrel并进行了一些修改后,我能够使它起作用。我的问题似乎源于woff文件。我只是把所有的松鼠文件放到我的FTP上,重新做了css,现在它工作了。对于那些有类似问题的人,我只是更改了css,查看原始问题,看看我是如何修复的。我的经验是,通向字体的路径可能很棘手-使用绝对路径和相对路径进行测试。所以在提出这个问题之前,我已经查看了fontsquirrel,它显示的格式基本上就是我所拥有的,但在使用了fontsquirrel并进行了一点尝试之后,我终于能够让它工作了。我的问题似乎源于woff文件。我只是把所有的松鼠文件放到我的FTP上,重新做了css,现在它工作了。对于那些有类似问题的人,我刚刚更改了css,查看原始问题,看看我是如何修复的。我的经验是,通向字体的路径可能很棘手-使用绝对路径和相对路径进行测试。你,互联网的陌生人,是这里真正的MVP。你,互联网的陌生人,是这里真正的MVP。