Как использовать скачанный шрифт в CSS - PullRequest
Новая
       78

Как использовать скачанный шрифт в CSS

0 голосов
/ 29 октября 2018

Очень начальный уровень здесь. У меня есть файл шрифта .ttf, который я хотел бы использовать для своего блога, но я не уверен, как / где я могу получить его код (?). Это правильно? 

* {
      font-family: 'providence-bold';
      src: url('/font/providence-bold.regular.ttf');
  }

не стесняйся, так как я сказал, что понятия не имею, что делаю.

РЕДАКТИРОВАТЬ: Вот ссылка на шрифт, который я пытаюсь использовать, если это поможет https://ufonts.com/download/providence-bold.html

Ответы [ 3 ]

0 голосов
/ 09 ноября 2018

Вам необходимо добавить ссылку на шрифт из URL, приведенного здесь:

https://ufonts.com/download/providence-bold.html

если вы добавите их вот так ../providence-bold.html они относятся к вашему HTML-документу. Так что должно быть установлено на вашем сервере http://yourname.tumblr.com или что-то еще.

Если вы измените URL для указания ресурса на ufonts, то он должен работать.

So 

@font-face {
font-family: 'providence-bold';
src: url('https://ufonts.com/fonts/providence-bold.eot');
src: url('https://ufonts.com/fonts/providence-bold.eot?#iefix') format('embedded-opentype'),
      url('https://ufonts.com/fonts/providence-bold.woff') format('woff'),
      url('https://ufonts.com/fonts/providence-bold.ttf') format('truetype'),
      url('https://ufonts.com/fonts/providence-bold.svg#providence-bold') format('svg');
      font-weight: normal;
      font-style: normal;
    }

Однако эти ресурсы должны существовать в URL-адресе ufonts. Если это просто место для загрузки файла ttf, это не будет работать. Их нужно откуда-то обслуживать, и Tumblr не позволит вам загружать файлы шрифтов на их серверы.

0 голосов
/ 09 ноября 2018 
@font-face {
  font-family: 'providence-bold';
  src: url('/font/providence-bold.regular.ttf');

}

Это формат, который я использую.Просто убедитесь, что путь указан правильно.

Примечание: Мне не нравится использовать подчеркивания (_) и тире (-) в переменных.Вы будете более устойчивы, если привыкнете писать переменные как camelCase или PiscalCase.

0 голосов
/ 29 октября 2018

Я бы посоветовал, и лучший способ включить шрифты - это преобразовать их в эти форматы.

Вы можете получить код здесь после преобразования шрифтов в нужные вам форматы -> ссылка

После того, как вы конвертируете свои шрифты, он произведет извлечение файла rar, вы найдете font.css, где вы можете найти эти коды. format selection extracted rar file Finally the font.css

@font-face {
font-family: 'providence-bold';
src: url('../fonts/providence-bold.eot');
src: url('../fonts/providence-bold.eot?#iefix') format('embedded-opentype'),
      url('../fonts/providence-bold.woff') format('woff'),
      url('../fonts/providence-bold.ttf') format('truetype'),
      url('../fonts/providence-bold.svg#providence-bold') format('svg');
      font-weight: normal;
      font-style: normal;
    }

Обязательно проверьте свой URL к месту расположения шрифтов.

...