Как преобразовать веб-шрифты Google в комбинированный CSS

Question

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

У меня уже есть php-скрипт, который скачивает файлы шрифтов. Теперь нужен только CSS.

Как вы знаете, API веб-шрифтов Google предоставляет специальный CSS в зависимости от пользовательского агента браузеров.

У меня есть несколько вопросов об этом.

1. Верно ли, что веб-шрифты Google получают только один шрифт как svg только для OS-устройств, я заметил это при тестировании нескольких шрифтов (с фальшивым пользовательским агентом). В то время как для других есть несколько объявлений @font-face, но с font-weight и font-style разными. Правильно ли я полагаю, что Google обслуживает SVG только для «обычной» версии шрифтов, а не «курсив, жирный, книжный ...»
2. Каков наилучший способ объединить их в один CSS, особенно в отношении этого комбинированного Шрифт SVG.

Answer 1

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

С IE я не могу вам помочь. Но когда вы создаете новое правило @ font-face, вы можете указать шрифт-вес.

/** #1 **/ 
@font-face { 
    font-family: 'Open Sans'; 
    font-style: normal; 
    font-weight: 600; 
    src: local('Open Sans Extrabold'), 
     local('OpenSans-Extrabold'), 
     url(http://themes.googleusercontent.com/static/fonts/opensans/v6/EInbV5DfGHOiMmvb1Xr-hnhCUOGz7vYGh680lGh-uXM.woff) 
      format('woff'); 
} 
/** #2 **/ 
@font-face { 
    font-family: 'Open Sans'; 
    font-style: italic; 
    font-weight: 300; 
    src: local('Open Sans Light Italic'), 
     local('OpenSansLight-Italic'), 
     url(http://themes.googleusercontent.com/static/fonts/opensans/v6/PRmiXeptR36kaC0GEAetxh_xHqYgAV9Bl_ZQbYUxnQU.woff) 
      format('woff'); 
} 


.a { 
    font-family: 'Open Sans'; 
    font-weight: 300; /** #2 used for <= 500 cos font-weights are 300 and 600 **/ 
} 

.b { 
    font-family: 'Open Sans'; 
    font-weight: 800; /** #1 used for >= 600 **/ 
} 

Надеюсь, это поможет вам.

Answer 2

Вы правы, что Google обслуживает только шрифт для вашего конкретного пользовательского агента. Получить их все сложно.

Вы упомянули вас есть PHP скрипт для извлечения различных форматов шрифтов, поэтому вы можете не нужны эти два варианта, но я перечислю их все равно:

Вариант 1

В этой статье через процесс, как загрузить все различные форматы:

http://ijotted.blogspot.com/2012/05/download-eot-ttf-woff-formats-of-font.html

Короче говоря, вы должны будете использовать агент пользователя подмену, чтобы захватить все различные форматы.

Вариант 2

Другим вариантом было бы просто взять версию TTF (так как это легко), а затем над головой http://www.fontsquirrel.com/tools/webfont-generator, чтобы их конвертировать/генерировать все другие версии.

Если вы в конечном итоге используете эту опцию, может быть полезно знать, что Joe Maller has put together a full download package, чтобы захватить все файлы шрифтов TTF сразу (хотя это может быть немного устаревшим).

Обслуживание с помощью CSS

После того, как у вас есть все различные версии, используйте синтаксис, как это для CSS. Это от FontSpring's Bulletproof Font-Face Syntax.

@font-face { 
font-family: 'MyFontFamily'; 
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
    url('myfont-webfont.woff') format('woff'), 
    url('myfont-webfont.ttf') format('truetype'), 
    url('myfont-webfont.svg#svgFontName') format('svg'); 
} 

Эта последняя строка, конечно, зависит от того, есть ли у вас файл шрифта SVG. Что приводит нас к ...

SVG

Это first link претензии:

Хотя это правда, что Google служит формат шрифта SVG на IOS устройств под управлением версии 4.2 или ниже, я могу подтвердить, что SVG пусты или сломаны. Поэтому верно, что Google больше не поддерживает устройства под управлением iOS версий 4.2 и ниже. Имплицирует, не имеет формата шрифта SVG.

Я не был в состоянии проверить это в другом месте, но я видел много пользователей, жалующихся вопросы SVG, шрифты не загружается ... Я был бы склонен игнорировать SVG в качестве опции, а также сосредоточиться на обслуживании EOT/WOFF/TTF. Кажется, это самый надежный способ покрытия ваших баз.

Обновление: похоже, что fontsquirrel.com может генерировать версию SVG. Поэтому, хотя Google не предоставляет SVG в качестве опции загрузки, вы все равно можете сгенерировать ее, если хотите.