Как загрузить несколько форматов веб-шрифта из (официального) репозитория Google Web Fonts?

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



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



Как и где я могу скачать 4 формата файлов для веб-шрифта, который я хотел бы использовать?



PS: Используя различные браузеры-Chrome, IE9 и Safari (dev-iPhone UA), я смог получить форматы WOFF, EOT и TTF. Однако с форматом SVG не повезло. Было бы здорово, если бы существовал еще более простой способ.



EDIT: О, и кстати, я знаю, что могу загружать различные форматы изfontsquirrel , но я говорю о загрузке из официального РЕПО здесь.

989   6  

6 ответов:

Вы можете клонировать каталог webfonts Google в http://code.google.com/p/googlefontdirectory/

Вы также можете получить файлы с одним шрифтом в http://code.google.com/p/googlefontdirectory/source/browse/#font_name

8  
2012-04-24 17:39:17

======= обновлено 2016-05-31 =======

Я сделал крошечный PHP-скрипт для получения ссылок на скачивание из URL-адреса импорта CSS-шрифтов Google, например: https://fonts.googleapis.com/css?family=Roboto:400,700|Slabo+27px|Lato:400,300italic,900italic

Вы можете использовать этот инструмент здесь: http://nikoskip.me/gfonts.php

Например, если вы используете приведенный выше URL импорта, вы получите следующее:

Введите описание изображения здесь

Я устал от обновления этого ответа на каждый новый выпуск Chrome, потому что они всегда меняют способ, которым вы можете подделать строку агента пользователя, поэтому, пожалуйста, используйте этот скрипт вместо этого.

======= СТАРОЕ РЕШЕНИЕ =======

С помощью DevTools из Chrome вы можете переопределить пользовательский агент.

Как:

  1. Найдите нужный шрифт на странице Google Fonts.
  2. вы получите URL для импорта в CSS, например: http://fonts.googleapis.com/css?family=Cabin:500,700,500 курсив,700italic
  3. Откройте этот URL в вашем браузере,и вы увидите полный URL, где вы можете загрузить шрифт.
  4. перейдите в раздел Инструменты разработчика (F12) и нажмите клавишу ESC
  5. выберите вкладку "эмуляция", а затем нажмите на вкладку" Сеть "
  6. наконец на Spoof user agent выберите IE9 для формата EOT, Android 4 для TTF и эту строку UA для SVG: Mozilla/4.0 (iPad; CPU OS 4_0_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/4.1 Mobile/9A405 Safari/7534.48.3 (Спасибо anonymous)
46  
2016-10-20 19:04:17

Как получить URL загрузки шрифтов, включая SVG и woff2.

Для загрузки каждого шрифта требуются следующие агенты пользователей. Источник . 

module.exports = {
  USER_AGENTS: {
    eot: 'Mozilla/5.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0)',
    woff: 'Mozilla/5.0 (Windows NT 6.1; WOW64; rv:27.0) Gecko/20100101 Firefox/27.0',
    woff2: 'Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML like Gecko) Chrome/38.0.2125.104 Safari/537.36', // complete woff2 file for one variant
    svg: 'Mozilla/4.0 (iPad; CPU OS 4_0_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/4.1 Mobile/9A405 Safari/7534.48.3',
    ttf: 'Mozilla/5.0 (Windows NT 6.1) AppleWebKit/534.54.16 (KHTML, like Gecko) Version/5.1.4 Safari/534.54.16'
  },
  GOOGLE_FONTS_API_KEY: 'AIzaSyDY-C-Lt9uyPP5fSTjMCR4bB944SlI4spw',
  CACHE_DIR: __dirname + "/cachedFonts/",
}

Добавьте эти useragents с помощью devtool.

Как добавить новые устройства в chrome

Источник

Теперь вы можете посетить https://fonts.googleapis.com/css?family=Open+Sans и подделать свой пользовательский агент, загрузив шрифты, посетив url, найденный в @font-face.

Альтернативноgoogle-webfonts-helper делает все это за вас. google-webfonts-помощник Есть отличный пост в блоге здесь от разработчика, где я приобрел изображение.

Почему вы хотите стать самостоятельным хозяином?

Всегда используйте общий CDN, если это возможно, его гораздо более вероятно, что ваш шрифт даже не нужно будет загружать(браузер кэшируется).

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

Вставьте @font-face самостоятельно, просто выполните описанные выше действия, чтобы найти url-адрес шрифта google и вставить его в <head>;

<style>

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url(google-font-url-here/opensans.eot);
    src: local('Open Sans'), local('OpenSans'),
    url(google-font-url-here/opensans.eot?#iefix) format('embedded-opentype'),
    url(google-font-url-here/opensans.woff2) format('woff2'), 
    url(google-font-url-here/opensans.woff) format('woff'), 
    url(google-font-url-here/opensans.ttf) format('truetype'), 
    url(google-font-url-here/opensans.svg#OpenSans) format('svg');
}

</style>

Это связано с рисками, так как URL-адреса могут измениться!

4  
2016-03-09 13:21:25

Я сделал онлайн-клон:)

Https://bitbucket.org/Tymek/google-web-fonts/ Вот так!

3  
2013-04-23 15:46:09

Я не являюсь партнером этого бизнеса или веб-сайта в любом случае, но я смог получить все необходимые форматы в onlinefontconverter.com .

Мне нужны были форматы eot, svg, woff и ttf. У меня уже был ТТФ. Я загрузил его, и сайт создал остальное - все за несколько минут.
1  
2015-12-08 22:01:39

Я написал сценарий PowerShell для автоматической загрузки шрифтов, обслуживаемых несколькими различными агентами пользователей. Для базового шрифта он получает все четыре формата (woff, ttf, svg, eot). Google, похоже, не обслуживает файлы SVG и EOT для жирного и курсивного Весов.


$agents = "Mozilla/5.0 (X11; Linux i686; rv:6.0) Gecko/20100101 Firefox/6.0",`
    "Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; de-at) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1",`
    "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 7.1; Trident/5.0)",`
    "Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_0 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8A293 Safari/6531.22.7",`
    "Mozilla/5.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; GTB7.4; InfoPath.2; SV1; .NET CLR 3.3.69573; WOW64; en-US)"

foreach($arg in $args) {
    $arg;
    foreach($agent in $agents) {
        $agent;
        $webclient = New-Object System.Net.WebClient
        [void]$webclient.Headers.Add("user-agent", $agent)
        $url = "http://fonts.googleapis.com/css?family=$arg"

        $css = $webclient.DownloadString($url)
        $css
        $fonts = $css |
            Select-String -AllMatches "http://[A-Za-z0-9/._?&=%-]+" |
            Select-Object -ExpandProperty Matches |
            Select-Object -ExpandProperty Value

        foreach($font in $fonts) {
            $font
            $fontfile = [System.Io.Path]::GetFileName((new-object System.Uri $font).LocalPath)
            [void]$webclient.DownloadFile($font, "$pwd\$fontfile")
        }
    }
}

Как только он находится в файле. ps1, его можно вызвать с помощью шрифтов для загрузки в качестве аргументов: 

PS> .\DownloadFonts.ps1 "Open+Sans:400,700,400italic,700italic"

Скрипт выведет CSS, извлеченный с серверов Google, чтобы помочь вам понять, какой файл является каким (например, в моем если шрифт SVG был извлечен в виде файла под названием "шрифт").

Это основано на скриптах bash, опубликованных RichardN и ldeck в блоге локальное кэширование Google Web Fonts.

Для справки, вот сценарий Баша ldeck: 


#!/bin/sh

for family in $*; do
 for url in $( {
 for agent in \
 'Mozilla/5.0 (X11; Linux i686; rv:6.0) Gecko/20100101 Firefox/6.0' \
 'Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; de-at) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1' \
 'Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 7.1; Trident/5.0)' ;
 do
 curl -A "$agent" -s "http://fonts.googleapis.com/css?family=$family" | \
 grep -oE 'http://[A-Za-z0-9/._-]+'; \
 done } | sort -u ) ;
 do
 extn=${url##*.} ;
 file=$(echo "$family"| tr +[:upper:] _[:lower:]);
 echo $url $file.$extn;
 curl -s "$url" -o "$file.$extn";
 done
done

Дополнительная ссылка: использование HTML5 AppCache.

1  
2015-12-29 02:15:50

Comments

    Ничего не найдено.
Click here to cancel reply.