CSS 自定义字体仅在 Chrome 中加载

Question

我真的对编码一窍不通。所以请多多包涵。我的公司将 Vimeo OTT 用于我们的视频流媒体平台。他们的模板非常糟糕，我们能做的改变非常有限。我最近将我们的品牌字体添加到我们的网站，我认为它可以正常工作，但我们只是注意到我们的自定义字体仅在 chrome 中加载，但不会在 Safari 或 iOS/Android 设备中加载。

我们尝试了两种不同的方式来合并代码（粘贴在下面）。我已经与多个编码员交谈过，他们都说我的两种代码方法看起来都正确并且应该有效。

有什么我遗漏的吗？

注意，我在我们的 Squarespace 站点中加载了相同的字体，所以我只是从 Squarespace 服务器下载字体。

@导入方法

@import url('https://static1.squarespace.com/static/5eeac4a9e9957c6f6a19bb01/t/5f21b48171945a3a215a7662/1596044417854/UnitedSansReg-Bold.woff2') ;

a.btn-site-primary, .btn-site-primary,.site-link-header-color, a.site-link-header-color:link, a.site-link-header-color:visited, .slide-title, .slide-button, .browse-row h1, .packages-head h1, h1.head.primary, .collection-title, .comment-count, .comment-count-language {
  text-transform: uppercase;
  font-family: 'UnitedSansReg-Bold' !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-format: woff2 !important;
}

@import url('https://static1.squarespace.com/static/5eeac4a9e9957c6f6a19bb01/t/5f21b496c5f4ff2084e6c28e/1596044438306/UnitedSansReg-Light.woff2') ;

.cta--subscribe, .info--payment-details, .footer--site .helper-links a, .slide-subtitle span, .slide-description, .browse-item-title .subtext-container div, .see-more-link span, .see-more-row span, .browse-item-title strong, .btn-nowrap, .browse-item-subtext, .tooltip-description, h5, .comment-submit, .submit-comment-support-text {
  text-transform: uppercase;
  font-family: 'UnitedSansReg-Light' !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-format: woff2 !important;
}

@font-face方法：

@font-face {
font-family: "UnitedSansReg-Bold" !important;
src: url("https://static1.squarespace.com/static/5eeac4a9e9957c6f6a19bb01/t/5f21ac45c5f4ff2084e52867/1596042309239/UnitedSansReg-Bold.eot") !important;
src: url("https://static1.squarespace.com/static/5eeac4a9e9957c6f6a19bb01/t/5f21a521f31c40507d5bcf04/1596040481708/UnitedSansReg-Bold.ttf") format("truetype"),
src: url("https://static1.squarespace.com/static/5eeac4a9e9957c6f6a19bb01/t/5f21b47bfb59025fbf301919/1596044411136/UnitedSansReg-Bold.woff") format(“woff”),
src: url("https://static1.squarespace.com/static/5eeac4a9e9957c6f6a19bb01/t/5f21b48171945a3a215a7662/1596044417854/UnitedSansReg-Bold.woff2") format(“woff2”),
url("https://static1.squarespace.com/static/5eeac4a9e9957c6f6a19bb01/t/5eebff3fd26de839fdd10b95/1592524607602/UnitedSansReg-Bold.otf") format("opentype") !important;
}

@font-face {
font-family: "UnitedSansReg-Light” !important;
src: url("https://static1.squarespace.com/static/5eeac4a9e9957c6f6a19bb01/t/5f21ad8b94f7832d9b0ce766/1596042636037/UnitedSansReg-Light.eot") !important;
src: url("https://static1.squarespace.com/static/5eeac4a9e9957c6f6a19bb01/t/5f21a563818afc02a1a333c7/1596040547396/UnitedSansReg-Light.ttf") format("truetype"),
src: url("https://static1.squarespace.com/static/5eeac4a9e9957c6f6a19bb01/t/5f21b494ba739a4d1d5c4ea9/1596044436254/UnitedSansReg-Light.woff") format(“woff”),
src: url("https://static1.squarespace.com/static/5eeac4a9e9957c6f6a19bb01/t/5f21b496c5f4ff2084e6c28e/1596044438306/UnitedSansReg-Light.woff2") format(“woff2”),
url("https://static1.squarespace.com/static/59493973ccf210840b5b1e97/t/5ecfc18f529a4541ed266581/1590673807762/UnitedSansReg-Light.otf") format("opentype") !important;
}

a.btn-site-primary, .site-link-header-color, a.site-link-header-color:link, a.site-link-header-color:visited, .slide-title, .slide-button, .browse-row h1, .packages-head h1, h1.head.primary, .collection-title, .comment-count, .comment-count-language {
  text-transform: uppercase;
  font-family: 'UnitedSansReg-Bold' !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-format: opentype !important;
  font-format: woff !important;
  font-format: woff2 !important;
  font-format: truetype !important;
}

.cta--subscribe, .info--payment-details, .footer--site .helper-links a, .slide-subtitle span, .slide-description, .browse-item-title .subtext-container div, .see-more-link span, .see-more-row span, .browse-item-title strong, .btn-nowrap, .browse-item-subtext, .tooltip-description, h5, .comment-submit, .submit-comment-support-text {
  text-transform: uppercase;
  font-family: 'UnitedSansReg-Light' !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-format: opentype !important;
  font-format: woff !important;
  font-format: woff2 !important;
  font-format: truetype !important;
}

Answer 1

这对我有用：

@font-face {
    font-family: "UnitedSansReg-Bold";
    src: url("fonts/https://static1.squarespace.com/static/5eeac4a9e9957c6f6a19bb01/t/5f21ac45c5f4ff2084e52867/1596042309239/UnitedSansReg-Bold.eot");
    src: url("fonts/https://static1.squarespace.com/static/5eeac4a9e9957c6f6a19bb01/t/5f21ac45c5f4ff2084e52867/1596042309239/UnitedSansReg-Bold.eot?#iefix") format("embedded-opentype"),
         url("https://static1.squarespace.com/static/5eeac4a9e9957c6f6a19bb01/t/5f21b48171945a3a215a7662/1596044417854/UnitedSansReg-Bold.woff2") format("woff2"),
         url("https://static1.squarespace.com/static/5eeac4a9e9957c6f6a19bb01/t/5f21b47bfb59025fbf301919/1596044411136/UnitedSansReg-Bold.woff") format("woff"),
         url("https://static1.squarespace.com/static/5eeac4a9e9957c6f6a19bb01/t/5eebff3fd26de839fdd10b95/1592524607602/UnitedSansReg-Bold.otf") format("opentype"),
         url("https://static1.squarespace.com/static/5eeac4a9e9957c6f6a19bb01/t/5f21a521f31c40507d5bcf04/1596040481708/UnitedSansReg-Bold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
}

p {
    font-family: "UnitedSansReg-Bold";
    font-size: 20px;
}

HTML:

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>

Answer 2

.eot 文件应该在它自己的 src: url() for IE9 但其余部分可以在一个 'src' 定义中用逗号分隔，如 Thomas 所展示的。

很有可能您只是在覆盖规则。 !important 对一切都可能使事情变得更糟。

CSS 自定义字体仅在 Chrome 中加载

CSS custom font only loads in Chrome

css

font-face

custom-font