你如何让 Font-Face 在 iOS 上加载字体？

Question

我正在使用 Gatsby.js、Styled-Components 和一种名为“Montserrat”的自定义字体构建一个网站。字体在构建时和热重载时为桌面浏览器加载。它没有在移动 iOS 上加载（我无权访问 Android）。我正试图找出我哪里出错了。

我试过了：

• 使用谷歌字体；

• 使用从文件路径直接导入的url；

• 使用js导入文件路径；

• 对每个单独的字体使用单独的字体调用。

我已经阅读了几个关于 SO 的问题并搜索了 Google，但大多数结果都是一般格式问题或我已经尝试过的事情。

这是我要导入本地字体的 main.js：

import { createGlobalStyle } from 'styled-components';
import theme from './theme';
import * as MontserratRegularEOT from './fonts/MontserratRegular.eot';
import * as MontserratRegularOTF from './fonts/MontserratRegular.otf';
import * as MontserratRegularTTF from './fonts/MontserratRegular.ttf';
import * as MontserratRegularWOFF from './fonts/MontserratRegular.woff';
import * as MontserratRegularWOFF2 from './fonts/MontserratRegular.woff2';
import * as MontserratBoldEOT from './fonts/MontserratBold.eot';
import * as MontserratBoldOTF from './fonts/MontserratBold.otf';
import * as MontserratBoldTTF from './fonts/MontserratBold.ttf';
import * as MontserratBoldWOFF from './fonts/MontserratBold.woff';
import * as MontserratBoldWOFF2 from './fonts/MontserratBold.woff2';
const MainStyle = createGlobalStyle`

@charset "utf-8";

/*
This is compiled file, for the original file please see .less file
1. HTML Elements
2. IDs
3. Classes
4. Animations
5. Media Queries
6. Less Elements (in .less file only)
*/

@font-face {
  font-family: 'Montserrat';
  src: local('Montserrat'), url(${MontserratRegularEOT}), /* IE9 Compat Modes */
  src: local('Montserrat'), url(${MontserratRegularOTF}) format('embedded-opentype'), /* IE6-IE8 */
  src: local('Montserrat'), url(${MontserratRegularWOFF2}) format('woff2'), /* Super Modern Browsers */
  src: local('Montserrat'), url(${MontserratRegularWOFF}) format('woff'), /* Pretty Modern Browsers */
  src: local('Montserrat'), url(${MontserratRegularTTF}) format('truetype'); /* Safari, Android, iOS */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: local('Montserrat'), url(${MontserratBoldEOT}), /* IE9 Compat Modes */
  src: local('Montserrat'), url(${MontserratBoldOTF}) format('embedded-opentype'), /* IE6-IE8 */
  src: local('Montserrat'), url(${MontserratBoldWOFF2}) format('woff2'), /* Super Modern Browsers */
  src: local('Montserrat'), url(${MontserratBoldWOFF}) format('woff'), /* Pretty Modern Browsers */
  src: local('Montserrat'), url(${MontserratBoldTTF}) format('truetype'); /* Safari, Android, iOS */
  font-weight: bold;
  font-style: normal;
}

/*== 1 HTML Elements ==*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, Newsletter, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  font-family: 'Montserrat', san-serif !important;
}`

这是一个示例组件（为了便于阅读，我在这里删除了一些样式），它应该使用该字体，但不会在移动设备上加载它：

import React from 'react'
import styled from 'styled-components'
import Img from 'gatsby-image'
import {Row, Col} from 'react-bootstrap';

// other styles

const Headline = styled.h4`
  padding-top: 80px;
  color: ${props => props.theme.colors.base}; 
  font-size: 33px; 
  @media (max-width: 475px) {
    font-size: 1.6875rem; 
    padding-top: 0px;
  }
`

// other styles

const MainCardBlock = (props) => {
  return (
      <MainCard>
        <Col sm={6} className={'main-image-block'}>
          <Image fluid={props.mainCard.cardImage.fluid} backgroundColor={'#eeeeee'} />
        </Col>
        <TextContainer sm={6}>
          <Headline>{props.mainCard.headline}</Headline>
          <Excerpt dangerouslySetInnerHTML={{
                __html: props.mainCard.textBlock.childMarkdownRemark.html,
              }}
          mainCard/>
        </TextContainer>
      </MainCard>
    )
}

export default MainCardBlock

目前，加载“san-serif”而不是“Montserrat”。我期待<h4 class="MainCardBlock__Headline-sc-6x7ja9-2 eLajVr">Quality. Value.</h4>* 使用“Montserrat”，但它使用的是“san-serif”。​​

*<Headline>{props.mainCard.headline}</Headline>

这是它当前的编译方式：

            @font-face {
                font-family: 'Montserrat';
                src: local('Montserrat'),url(/static/MontserratRegular-cf004f9f3076d2c5af3d93c4740e9a9c.eot), src:local('Montserrat'),url(/static/MontserratRegular-a53070e1dc5d0a6703a83f9a8d1a81d5.otf) format('embedded-opentype'), src:local('Montserrat'),url(/static/MontserratRegular-a34a420be1193527133f0a7c11ef1113.woff2) format('woff2'), src:local('Montserrat'),url(/static/MontserratRegular-4fff79a005c63b70ee3334d23fd147bc.woff) format('woff'), src:local('Montserrat'),url(/static/MontserratRegular-b26b6d576dafd8c4a9d9415d69ca175c.ttf) format('truetype');
                font-weight: normal;
                font-style: normal;
            }

            @font-face {
                font-family: 'Montserrat';
                src: local('Montserrat'),url(/static/MontserratBold-5fbc4fa26dc4dbd1759d01f72999e029.eot), src:local('Montserrat'),url(/static/MontserratBold-373b1bb1af0fd36999b5027121559d3e.otf) format('embedded-opentype'), src:local('Montserrat'),url(/static/MontserratBold-58fe2032a07491d722704318e649acba.woff2) format('woff2'), src:local('Montserrat'),url(/static/MontserratBold-2c6fd139d7caa7583c6342a4a21fe4b3.woff) format('woff'), src:local('Montserrat'),url(/static/MontserratBold-e7b037f6d6fe39b886ecae436be231e5.ttf) format('truetype');
                font-weight: bold;
                font-style: normal;
            }

您可以查看实时版本here 或将文件路径附加到此网址的末尾并下载所有这些字体：https://5ca02c0a33a9ee00089e5bd8--reeds-market.netlify.com。

Answer 1

快速理论：无衬线在您的 CSS 的 body 元素上拼写错误，而 h4 继承自该元素。由于拼写错误，是否有可能在 iOS 上忽略整行 CSS？ （试试sans-serif）