你如何让字体在iOS上加载字体?

Question

我正在使用Gatsby.js，Styled-Components和一个名为"Montserrat"的自定义字体构建一个网站。字体在构建和热重载时加载到桌面浏览器。它没有在移动iOS上加载(我无法访问Android)。我试图弄清楚我哪里出错了。

我试过：

• 使用谷歌字体;

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

• 使用 js 导入文件路径;

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

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

这是我的主要.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>*使用"蒙特塞拉特"，但它使用的是"无衬线"。

*<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;
}

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

Answer 1

快速理论：Sans-serif 在 css 的body元素上拼写错误，h4从该元素继承。是否有可能因为拼写错误而在iOS上忽略整行css？(尝试sans-serif)