字体无法在Safari或移动浏览器中呈现

Question

我的自定义MyFonts字体在Safari和移动浏览器中出现问题。 Chrome和Firefox很好。

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

URL：http://geltor.com

正确的字体显示在Mac上的Chrome和Safari中，但是Safari和所有移动浏览器默认为sans-serif备份。希望获得正确的Brasley字体来显示everywere的任何指示。谢谢！

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>

Answer 1

根据我在您的网站上看到的信息，现在仅使用了sans-serif后备。目前不显示Brasley。但是，如果您将字体的名称更改为“ Brasley-Regular”，则可以正常工作。

基本切换此：

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

收件人

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

仅供参考，不需要字体家族名称的引号，仅当字体名称包含空格或其他字符（例如“ Proxima Nova”）时才需要使用引号。有关更多信息，请参见此question。