Сделали веб-сайт на GitHub, шрифт отображается не во всех браузерах, операционных системах и устройствах? - PullRequest
Новая
       5

Сделали веб-сайт на GitHub, шрифт отображается не во всех браузерах, операционных системах и устройствах?

0 голосов
/ 08 мая 2020

Я создал веб-сайт с помощью GitHub, и шрифт, который я использовал (Lato), кажется, отображается только в Google Chrome, но только на телефонах macOS и Android. На ноутбуках Safari, iPhone и Windows вместо этого отображается Times New Roman. Я не уверен, в чем проблема, поскольку я выбрал Lato как шрифт Google? Разве это не должно работать во всех браузерах / операционных системах / устройствах? Могу ли я загрузить папку шрифтов в свой репозиторий GitHub? Также не знаю, имеет ли это значение, но мой код использовал "font-family" для вызова Lato. Должен ли я не использовать это?

EDIT: добавление моего кода для справки

HTML

<head>
  <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
    <link rel="manifest" href="site.webmanifest">
    <script src="https://kit.fontawesome.com/3fdadcecb8.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900' rel='stylesheet' type='text/css'>
</head>

CSS

.title {
    font-family: "Lato";
    text-align: left;
}
.text {
    font-family: “Lato”;
    font-weight: 300;
    text-align: left;
}
.bold {
    font-family: "Lato";
    font-weight: 700;
}

Ответы [ 2 ]

0 голосов
/ 08 мая 2020

Я ИСПРАВИЛ.

По сути, проблема была вызвана принудительным использованием https на моем веб-сайте. Шрифт ссылался на http, поэтому я просто изменил его на https, и теперь он работает: D

0 голосов
/ 08 мая 2020

Вам нужно добавить в свой тег <head> следующее: 

<link href='http://fonts.googleapis.com/css?family=Lato:300,700,900' rel='stylesheet' type='text/css'>

Тогда ваш CSS должен быть следующим: 

.body {
    font-family: "Lato";
}

.title {
    font-weight: 900;
    font-size: 3em;
}

.text {
    color: black;
    font-weight: 300;
}

.bold {
    font-weight: 700;
}

Вот рабочий пример: https://codepen.io/fraggley/pen/YzyaNJa

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...