Css Safari或移动浏览器中不呈现字体

Safari和移动浏览器中自定义MyFonts字体呈现存在问题。Chrome和Firefox都不错

字体文件和MyFontsWebfontsKit.css文件位于正确的位置，并且在主样式表中正确调用了这些文件。字体文件包括.eot.woff。woff2.ttf.svg

网址：

正确的字体显示在Mac上的Chrome和Safari中，但Safari和所有移动浏览器默认为无衬线备份。如果您能提供任何关于如何使用正确的Brasley字体在任何地方显示的建议，我们将不胜感激。谢谢

MyFontsWebfontsKit.css：

@import url("//hello.myfonts.net/count/391209");


@font-face {font-family: 'Brasley-Bold';src: url('webfonts/391209_0_0.eot');src: url('webfonts/391209_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/391209_0_0.woff2') format('woff2'),url('webfonts/391209_0_0.woff') format('woff'),url('webfonts/391209_0_0.ttf') format('truetype'),url('webfonts/3927A3_A_0.svg') format('svg');}


@font-face {font-family: 'Brasley-Light';src: url('webfonts/391209_1_0.eot');src: url('webfonts/391209_1_0.eot?#iefix') format('embedded-opentype'),url('webfonts/391209_1_0.woff2') format('woff2'),url('webfonts/391209_1_0.woff') format('woff'),url('webfonts/391209_1_0.ttf') format('truetype'),url('webfonts/3927A3_2_0.svg') format('svg');}


@font-face {font-family: 'Brasley-Thin';src: url('webfonts/391209_2_0.eot');src: url('webfonts/391209_2_0.eot?#iefix') format('embedded-opentype'),url('webfonts/391209_2_0.woff2') format('woff2'),url('webfonts/391209_2_0.woff') format('woff'),url('webfonts/391209_2_0.ttf') format('truetype'),url('webfonts/3927A3_0_0.svg') format('svg');}


@font-face {font-family: 'Brasley-BoldItalic';src: url('webfonts/391209_3_0.eot');src: url('webfonts/391209_3_0.eot?#iefix') format('embedded-opentype'),url('webfonts/391209_3_0.woff2') format('woff2'),url('webfonts/391209_3_0.woff') format('woff'),url('webfonts/391209_3_0.ttf') format('truetype'),url('webfonts/3927A3_B_0.svg') format('svg');}


@font-face {font-family: 'Brasley-Medium';src: url('webfonts/391209_4_0.eot');src: url('webfonts/391209_4_0.eot?#iefix') format('embedded-opentype'),url('webfonts/391209_4_0.woff2') format('woff2'),url('webfonts/391209_4_0.woff') format('woff'),url('webfonts/391209_4_0.ttf') format('truetype'),url('webfonts/3927A3_6_0.svg') format('svg');}


@font-face {font-family: 'Brasley-LightItalic';src: url('webfonts/391209_5_0.eot');src: url('webfonts/391209_5_0.eot?#iefix') format('embedded-opentype'),url('webfonts/391209_5_0.woff2') format('woff2'),url('webfonts/391209_5_0.woff') format('woff'),url('webfonts/391209_5_0.ttf') format('truetype'),url('webfonts/3927A3_3_0.svg') format('svg');}


@font-face {font-family: 'Brasley-ThinItalic';src: url('webfonts/391209_6_0.eot');src: url('webfonts/391209_6_0.eot?#iefix') format('embedded-opentype'),url('webfonts/391209_6_0.woff2') format('woff2'),url('webfonts/391209_6_0.woff') format('woff'),url('webfonts/391209_6_0.ttf') format('truetype'),url('webfonts/3927A3_1_0.svg') format('svg');}


@font-face {font-family: 'Brasley-SemiBold';src: url('webfonts/391209_7_0.eot');src: url('webfonts/391209_7_0.eot?#iefix') format('embedded-opentype'),url('webfonts/391209_7_0.woff2') format('woff2'),url('webfonts/391209_7_0.woff') format('woff'),url('webfonts/391209_7_0.ttf') format('truetype'),url('webfonts/3927A3_8_0.svg') format('svg');}


@font-face {font-family: 'Brasley-Regular';src: url('webfonts/391209_8_0.eot');src: url('webfonts/391209_8_0.eot?#iefix') format('embedded-opentype'),url('webfonts/391209_8_0.woff2') format('woff2'),url('webfonts/391209_8_0.woff') format('woff'),url('webfonts/391209_8_0.ttf') format('truetype'),url('webfonts/3927A3_4_0.svg') format('svg');}


@font-face {font-family: 'Brasley-MediumItalic';src: url('webfonts/391209_9_0.eot');src: url('webfonts/391209_9_0.eot?#iefix') format('embedded-opentype'),url('webfonts/391209_9_0.woff2') format('woff2'),url('webfonts/391209_9_0.woff') format('woff'),url('webfonts/391209_9_0.ttf') format('truetype'),url('webfonts/3927A3_7_0.svg') format('svg');}


@font-face {font-family: 'Brasley-SemiBoldItalic';src: url('webfonts/391209_A_0.eot');src: url('webfonts/391209_A_0.eot?#iefix') format('embedded-opentype'),url('webfonts/391209_A_0.woff2') format('woff2'),url('webfonts/391209_A_0.woff') format('woff'),url('webfonts/391209_A_0.ttf') format('truetype'),url('webfonts/3927A3_9_0.svg') format('svg');}


@font-face {font-family: 'Brasley-RegularItalic';src: url('webfonts/391209_B_0.eot');src: url('webfonts/391209_B_0.eot?#iefix') format('embedded-opentype'),url('webfonts/391209_B_0.woff2') format('woff2'),url('webfonts/391209_B_0.woff') format('woff'),url('webfonts/391209_B_0.ttf') format('truetype'),url('webfonts/3927A3_5_0.svg') format('svg');}

Style.css摘录：

<style>
p, h2, h3, h4, h5, a {
color:#1a2f5a;
font-family: "Brasley", sans-serif !important;
font-size: 1em;
line-height: 1.25em;
-webkit-font-smoothing: antialiased;
}

article .title-link a {
    color: #1a2f5a;
}

.bbx-bullet-link.type-2 {
    color: #1a2f5a;
}

.Brasley-Bold { 
    font-family: Brasley-Bold;
    font-weight: normal;
    font-style: normal;
}
.Brasley-Light { 
    font-family: Brasley-Light;
    font-weight: normal;
    font-style: normal;
}
.Brasley-Thin { 
    font-family: Brasley-Thin;
    font-weight: normal;
    font-style: normal;
}
.Brasley-BoldItalic { 
    font-family: Brasley-BoldItalic;
    font-weight: normal;
    font-style: normal;
}
.Brasley-Medium { 
    font-family: Brasley-Medium;
    font-weight: normal;
    font-style: normal;
}
.Brasley-LightItalic { 
    font-family: Brasley-LightItalic;
    font-weight: normal;
    font-style: normal;
}
.Brasley-ThinItalic { 
    font-family: Brasley-ThinItalic;
    font-weight: normal;
    font-style: normal;
}
.Brasley-SemiBold { 
    font-family: Brasley-SemiBold;
    font-weight: normal;
    font-style: normal;
}
.Brasley-Regular { 
    font-family: Brasley-Regular;
    font-weight: normal;
    font-style: normal;
}
.Brasley-MediumItalic { 
    font-family: Brasley-MediumItalic;
    font-weight: normal;
    font-style: normal;
}
.Brasley-SemiBoldItalic { 
    font-family: Brasley-SemiBoldItalic;
    font-weight: normal;
    font-style: normal;
}
.Brasley-RegularItalic { 
    font-family: Brasley-RegularItalic;
    font-weight: normal;
    font-style: normal;
}


.colorblock-dblue {color: white; background-color: #1a2f5a; padding:1em; width: 200px; margin-bottom: 1em;}

.colorblock-mblue {color: white; background-color: #515d7d; padding:1em; width: 200px; margin-bottom: 1em;}

.colorblock-lblue {color: white; background-color: #c2c9d3; padding:1em; width: 200px; margin-bottom: 1em;}

.colorblock-pink {color: white; background-color: #fee9df; padding:1em; width: 200px; margin-bottom: 1em;}

.colorblock-dpink {color: white; background-color: #CF7475; padding:1em; width: 200px; margin-bottom: 1em;}

body {color:#1a2f5a; font-family: "Brasley-Regular", sans-serif;  font-size: 1em; line-height: 1.25em; -webkit-font-smoothing: antialiased;}

a {color: inherit;}

a:hover {color: #CF7475; text-decoration: none;}

.menuitem {font-size: 1em; text-transform: uppercase; letter-spacing: .5em !important;}

.header-headline {font-size: 2.5em; line-heght: 3em; line-height: 1.25em; font-family: "Brasley-Medium", sans-serif;}

.header-body {font-size: 1.25em; line-height: 1.8em;}

.bluebox {background-color: #515d7d; padding: 1em; }

.bluebox-headline {font-size: 1.25em; line-height: 1.25em; font-family: "Brasley-Regular"; text-transform: uppercase; letter-spacing: .25em; color:#fee9df; }

.bluebox-body {color:#fee9df; line-height: 1.8em;}

.section-title {font-size: 1.25em; line-height: 1.5em; font-family: Brasley-Bold; text-transform: uppercase; letter-spacing: .25em;}

.section-headline-dblue {font-size: 3em; line-height: 1.25em; font-family: "Brasley-Medium";}

.section-headline-mblue {font-size: 3em; line-height: 1.25em; font-family: "Brasley-Medium"; color: #515d7d;}

.section-headline-dpink {font-size: 3em; line-height: 1.25em; font-family: "Brasley-Medium"; color:#CF7475;}

.section-subhead {font-family: "Brasley-Bold";}

.body-dblue {color:#1a2f5a;}

.body-mblue {color: #515d7d;}

.CTA {font-family: "Brasley-Medium";}

.Button-dblue {color:#fee9df; padding:.5em; padding-bottom: .4em; width: 200px; background-color: #1a2f5a; text-align: center; text-transform: uppercase; letter-spacing: .5em;  }

.Button-mblue {color:#fee9df; padding:.5em; padding-bottom: .4em; width: 200px; background-color: #515d7d; text-align: center; text-transform: uppercase; letter-spacing: .5em;  }

.legal {font-size: .75em; color:#515d7d;}

.footer {background-color: #2E4368; padding: 1em;}

.footer-menutitle {text-transform: uppercase; letter-spacing: .5em; font-family: "Brasley-Bold"; color: #fee9df; }

.footer-menuitem { font-size: .85em; color: #fee9df;}
</style>

p、 h2，h3，h4，h5，a{
颜色：#1a2f5a；
字体系列：“Brasley”，无衬线字体！重要；
字号：1em；
线高：1.25em；
-webkit字体平滑：抗锯齿；
}
文章标题链接a{
颜色：#1a2f5a；
}
.bbx-bullet-link.type-2{
颜色：#1a2f5a；
}
Brasley Bold{
字体系列：布拉斯利黑体；
字体大小：正常；
字体风格：普通；
}
Brasley Light{
字体系列：Brasley Light；
字体大小：正常；
字体风格：普通；
}
Brasley Thin{
字体系列：黄铜薄；
字体大小：正常；
字体风格：普通；
}
Brasley先生{
字体系列：布拉斯利黑体斜体；
字体大小：正常；
字体风格：普通；
}
Brasley中等{
字体系列：布拉斯利中型；
字体大小：正常；
字体风格：普通；
}
Brasley LightItalic{
字体系列：Brasley LightItalic；
字体大小：正常；
字体风格：普通；
}
Brasley ThinItalic{
字体系列：Brasley ThinItalic；
字体大小：正常；
字体风格：普通；
}
Brasley SemiBold{
字体系列：布拉斯利半黑体；
字体大小：正常；
字体风格：普通；
}
Brasley正则{
字体系列：布拉斯利正规；
字体大小：正常；
字体风格：普通；
}
Brasley MediumItalic{
字体系列：Brasley MediumItalic；
字体大小：正常；
字体风格：普通；
}
.Brasley半黑体斜体{
字体系列：布拉斯利半黑体斜体；
字体大小：正常；
字体风格：普通；
}
Brasley Regulatalic{
字体系列：Brasley Regulatalic；
字体大小：正常；
字体风格：普通；
}
.colorblock dblue{颜色：白色；背景色：#1a2f5a；填充：1em；宽度：200px；边距底部：1em；}
.colorblock mblue{颜色：白色；背景色：#515d7d；填充：1em；宽度：200px；边距底部：1em；}
.colorblock lblue{颜色：白色；背景色：#c2c9d3；填充：1em；宽度：200px；边距底部：1em；}
.colorblock粉红色{颜色：白色；背景色：#fee9df；填充：1em；宽度：200px；边距底部：1em；}
.colorblock dpink{颜色：白色；背景色：#CF7475；填充：1em；宽度：200px；边距底部：1em；}
正文{color:#1a2f5a；字体系列：“Brasley Regular”，无衬线；字体大小：1em；线条高度：1.25em；-webkit字体平滑：抗锯齿；}
a{color:inherit；}
a:hover{color:#CF7475；文本装饰：无；}
.menuitem{font size:1em；文本转换：大写；字母间距：.5em！重要；}
.header标题{字体大小：2.5em；行高：3em；行高：1.25em；字体系列：“Brasley-Medium”，无衬线；}
.header正文{字体大小：1.25em；行高：1.8em；}
.bluebox{背景色：#515d7d；填充：1em；}
.bluebox标题{字体大小：1.25em；行高：1.25em；字体系列：“Brasley Regular”；文本转换：大写；字母间距：.25em；颜色：#fee9df；}
.bluebox主体{颜色：#fee9df；线条高度：1.8em；}
.节标题{字体大小：1.25em；行高：1.5em；字体系列：Brasley Bold；文本转换：大写；字母间距：.25em；}
.section headline dblue{font size:3em；line height:1.25em；字体系列：“Brasley Medium”；}
.section headline mblue{字体大小：3em；线条高度：1.25em；字体系列：“Brasley-Medium”；颜色：#515d7d；}
.section headline dpink{字体大小：3em；行高：1.25em；字体系列：“Brasley-Medium”；颜色：#CF7475；}
.章节分目{字体系列：“布拉斯利黑体”}
.body dblue{color:#1a2f5a；}
.body mblue{color:#515d7d；}
.CTA{font系列：“Brasley中等”；}
.Button dblue{color:#fee9df；填充：.5em；填充底部：.4em；宽度：200px；背景色：#1a2f5a；文本对齐：居中；文本转换：大写；字母间距：.5em；}
.Button mblue{color:#fee9df；填充：.5em；填充底部：.4em；宽度：200px；背景色：#515d7d；文本对齐：居中；文本转换：大写；字母间距：.5em；}
.legal{字体大小：.75em；颜色：#515d7d；}
.footer{背景色：#2E4368；填充：1em；}
.footer menutitle{文本转换：大写；字母间距：.5em；字体系列：“Brasley Bold”；颜色：#fee9df；}
.footer菜单项{字体大小：.85em；颜色：#fee9df；}

从我在您的网站上看到的情况来看，现在只使用了无衬线回退。Brasley当前未显示。但是，如果您将字体名称更改为“Brasley Regular”，则它确实有效

基本上是这样的：

font-family: "Brasley", sans-serif !important;

到

---

仅供参考，字体系列名称周围不需要引号，仅当字体名称中有空格或其他名称（例如“Proxima Nova”）时才需要引号。有关更多信息，请参见此。

如果您只使用Brasley，为什么要加载Droid衬线、Open SAN和Roboto Slab？您的标签中有一整部分MyFonts Webfont注释，这正常吗？你怎么称呼Webfont的CSS？这是经典的wordpress钩子吗？谢谢你的回复，杰克。我对自定义字体工具包有点陌生（显然），但我遵循了MyFonts的Brasley webkit附带的安装说明。其中包括：1）将工具包的内容上载到根目录：2）从header调用工具包。php:3）编辑我的CSS以包含工具包附带的示例CSS代码（大部分代码您可以在我的原始帖子中看到）。同样，在Chrome/FF中，一切都很好。不是Safari。从我在你们网站上看到的情况来看，现在只使用了sans-serif后备版本。Brasley当前未显示。但是，如果您更改字体t的名称

font-family: Brasley-Regular, sans-serif !important;