Почему шрифтовые форматы, импортированные из Github, не работают правильно? - PullRequest
Новая
       65

Почему шрифтовые форматы, импортированные из Github, не работают правильно?

0 голосов
/ 21 апреля 2020

Использование canvas для генерации текста для некоторых торговых карточек (это проект сообщества)

И мне нужен был шрифт Andy. Однако нет стабильных веб-сервисов.

Так что я пошел с github. Я поместил все свои форматы шрифтов в эту папку репозитория:

https://github.com/FunctFlow/TerrariaTradingCards/tree/master/andy%20font%20family

Затем я использовал этот шрифт внутри своего проекта: 

@font-face {
 font-family: "Andy";
 src: url("https://github.com/FunctFlow/TerrariaTradingCards/raw/master/andy%20font%20family/Andy-Bold.eot");
 src: url("https://github.com/FunctFlow/TerrariaTradingCards/raw/master/andy%20font%20family/Andy-Bold.eot?#iefix")
   format("embedded-opentype"),
  url("https://github.com/FunctFlow/TerrariaTradingCards/raw/master/andy%20font%20family/Andy-Bold.woff2")
   format("woff2"),
  url("https://github.com/FunctFlow/TerrariaTradingCards/raw/master/andy%20font%20family/Andy-Bold.woff")
   format("woff"),
  url("https://github.com/FunctFlow/TerrariaTradingCards/raw/master/andy%20font%20family/Andy-Bold.ttf")
   format("truetype");
 font-weight: bold;
 font-style: normal;
}

Однако мой проект НЕ отображает шрифт andy, как вы можете видеть в этом коде: https://codepen.io/SkylerSpark/pen/bGVBpmj

1 Ответ

0 голосов
/ 21 апреля 2020

Мне нравится, что решения всегда появляются через несколько минут после того, как я сдался и пришел сюда.

По сути, Github обслуживает неправильные заголовки типов файлов, и веб-сайт не может распознавать форматы шрифтов.

Таким образом, вы не можете использовать Github для форматов шрифтов, так же, как вы не можете использовать его для размещения Javascript или CSS или чего-либо еще, на что вам нужно ссылаться через http.

Лучшее решение, которое я Можно подумать, это использовать инструмент, как jsDelivr для ссылки на шрифты. Как видно здесь: JsDelivr Github

И с помощью такой ссылки:

https://cdn.jsdelivr.net/gh/FunctFlow/TerrariaTradingCards@master / andy% 20font% 20family / Andy-Bold.ttf

Мои шрифты теперь отображаются успешно

...