Пользовательский шрифт не подключается на мобильном телефоне - PullRequest
Новая
       5

Пользовательский шрифт не подключается на мобильном телефоне

0 голосов
/ 05 января 2019

Я использую собственный шрифт на своей веб-странице, и он отлично работает в настольной версии, но на мобильных устройствах шрифт не меняется. Я думаю, что я должен делать что-то не так со свойством font-face. Вот файл CSS. Есть идеи? 

html, body {
      height: 100%;
      width: 100%;
    }

body {
  background-image: url("/images/Portrait.jpg");
  font-family: Occupied,Arial,sans-seriff;
}


@font-face {
  font-family:"Occupied";
  src: url("/public/font/Occupied.eot?") format("eot"),
       url("/public/font/Occupied.woff") format("woff"),
       url("/public/font/Occupied.otf") format("otf"),
       url("/public/font/Occupied.woff2") format("woff2"),
       url("/public/font/Occupied.ttf") format("truetype"), 
       url("/public/font/Occupied.svg#Occupied") format("svg");
  font-weight:normal;
  font-style:normal;
}

Ответы [ 2 ]

0 голосов
/ 05 января 2019

Я нашел эту статью на сайте csstricks.com. там они четко упомянули, что Правило @font-face должно быть добавлено в таблицу стилей перед любыми стилями.

дополнительно, CSS выполняется построчно. когда он хочет найти шрифт, который еще не определен, он возвращается к шрифту по умолчанию. в этом случае это sans-seriff, которое должно быть исправлено как sans-serif. некоторые браузеры достаточно умны, чтобы обнаруживать такие мелкие ошибки и исправлять их. Но это не гарантируется каждым браузером.

0 голосов
/ 05 января 2019

Попробуйте сначала добавить @ font-face 

@font-face {
  font-family:"Occupied";
  src: url("/public/font/Occupied.eot?") format("eot"),
       url("/public/font/Occupied.woff") format("woff"),
       url("/public/font/Occupied.otf") format("otf"),
       url("/public/font/Occupied.woff2") format("woff2"),
       url("/public/font/Occupied.ttf") format("truetype"), 
       url("/public/font/Occupied.svg#Occupied") format("svg");
  font-weight:normal;
  font-style:normal;
}

html, body {
      height: 100%;
      width: 100%;
    }

body {
  background-image: url("/images/Portrait.jpg");
  font-family: Occupied,Arial,sans-seriff;
}
...