我正在使用Gatsby.js，样式化组件和自定义字体“ Montserrat”构建网站。字体在构建时以及在热重载时会为桌面浏览器加载。它无法在移动iOS上加载（我无法使用Android）。我正在尝试找出我要去哪里。
我试过了：
使用Google字体；
使用从文件路径直接导入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> *使用“蒙特塞拉特”，但它使用的是“ 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。
最佳答案
快速理论：Sans-serif在CSS的body元素上拼写错误，并且h4继承自该元素。是否可能由于拼写错误而在iOS上忽略了整行CSS？ （尝试sans-serif）