Как добавить шрифт в веб-приложение .css-файл

Question

Я бы хотел добавить шрифт в свое веб-приложение, используя .css. Я знаю, что в css есть свойство @font-face, но проблема в том, что когда вы его определяете, вам нужно определить источник (src), который является тихим. Моя проблема в том, что я хочу на самом деле добавить шрифт, который находится на моем компьютере. Я хочу добавить его в свое веб-приложение, чтобы при развертывании этого веб-приложения в Интернете он будет показан правильно.

Итак, мой вопрос заключается в том, как я могу добавить этот шрифт (который находится на моем компьютере) в мое веб-приложение? Каким будет URL для этого?

@font-face { 
    font-family: 'fontfacename'; 
    src: url('?') format ('?'); 
} 

Answer 1

Для поддержки нескольких браузеров и операционных систем требуется несколько различных форматов шрифтов. Служба, такая как FontSquirrel, может генерировать файлы, а также CSS для вас, при условии, что данные шрифта, которые вы планируете использовать, свободны от ограничений (многие шрифты на вашем компьютере «не требуются и требуют лицензирования, которые многие коммерческие поставщики шрифтов также предоставляют).

код CSS выглядит следующим образом:

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

Answer 2

Заканчивать Google Fonts, чтобы увидеть, если есть шрифт, который сравним с шрифтом на вашем компьютере. Это может быть хорошим решением, если вы не хотите конвертировать и добавлять свои собственные шрифты.

Есть также такие услуги, как Typekit, который обслуживает шрифты для вас, как Google, за ежемесячную плату.

Google Fonts позволяет загружать шрифты на ваш компьютер, чтобы вы могли использовать его в своих приложениях и для компоновки композиций в таких приложениях, как Photoshop. Также есть бесплатные шрифты в LostType Co-Op, но не забудьте проверить лицензию на шрифт, чтобы убедиться, что он может свободно использоваться в Интернете.