Как вы получаете Font-Face для загрузки шрифтов на iOS? - PullRequest
Новая
       32

Как вы получаете Font-Face для загрузки шрифтов на iOS?

0 голосов
/ 31 марта 2019

Я создаю веб-сайт, используя Gatsby.js, Styled-Components и собственный шрифт под названием «Montserrat». Шрифт загружается для настольных браузеров при сборке и при горячей перезагрузке. Он не загружается на мобильном iOS (у меня нет доступа к Android). Я пытаюсь выяснить, где я иду не так.

Я пробовал:

  • Использование Google Fonts;

  • Использование прямого импорта 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

В настоящее время вместо 'Montserrat' загружается 'san-serif'. Я ожидаю, что <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;
            }

Вы можете просмотреть живую версию здесь или прикрепить путь к файлу в конце этого URL и загрузить все эти шрифты: https://5ca02c0a33a9ee00089e5bd8 - reeds-market.netlify.com .

1 Ответ

1 голос
/ 31 марта 2019

Краткая теория: Sans-Serif написан с ошибкой на элементе body вашего css, и h4 наследуется от этого элемента.Возможно ли, что вся эта строка CSS игнорируется на iOS из-за орфографической ошибки?(Попробуйте sans-serif)

...