ios - 你如何让 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或将文件路径附加到此 url 的末尾并下载所有这些字体:https://5ca02c0a33a9ee00089e5bd8--reeds-market.netlify.com .

Answer 1

快速理论:Sans-serif 在您的 css 的 body 元素上拼写错误，h4 继承自该元素。由于拼写错误，是否有可能在 iOS 上忽略整行 css？ (试试 sans-serif)