Comment télécharger plusieurs formats de polices web de l' (officiel) Polices Web de Google repo?

J'ai appris que Google sert automatiquement TTF, EOT, WOFF, ou SVG des fichiers de police en fonction de la navigateur /dispositif il est accessible à partir de.

Maintenant, je suis la planification d'accueillir et de servir les fichiers de polices de mon serveur lui-même, pour lequel je voudrais tout d'abord télécharger tous les formats de fichiers de polices web(s).

Comment ou où puis-je télécharger les 4 formats de fichiers pour un site web de police que je voudrais utiliser?

PS: Par l'utilisation de différents navigateurs, Chrome, IE9 et Safari (dev - iPhone UA), j'ai été en mesure d'obtenir le WOFF, EOT et formats TTF. Pas de chance avec le format SVG, si une. Il serait génial si il y a encore plus simple.

EDIT: Oh, et par la manière, je sais que je peux télécharger les différents formats de fontsquirrel, mais je suis en train de parler d'un téléchargement depuis le repo officiel ici.

Google webfonts ne prend pas en charge le format SVG.. c'est à dire: pas de polices personnalisées pour iPad et iPhone. (twitter.com/FontSquirrel/status/14312358613)

InformationsquelleAutor its_me | 2012-04-24

google-webfonts webfonts

8

Vous pouvez cloner le Google webfonts répertoire à http://code.google.com/p/googlefontdirectory/

Vous pouvez également avoir des fichiers de police à http://code.google.com/p/googlefontdirectory/source/browse/#font_name
- Mais... je veux que tous les quatre formats TTF, EOT, WOFF, et SVG.
- J'ai vu ton edit sur fontsquirrel, vous pouvez télécharger l' .La FTO, les polices de Google repo, accédez à fontsquirrel.com/fontface/generator et de créer tous les quatre types de fichiers, à partir de là.
- De toute façon, c'est un fichier de police de caractères générée par certains autres, et pas Google. Je suis un peu biaisé en faveur de Google. 😉
- Êtes-vous inquiet au sujet de l'intégrité des fichiers? Je l'ai fait une fois télécharger l'intégralité de l'googlefontdirectory mon ordinateur (seulement pour obtenir un fichier), mais je ne me souviens pas si elle contenait tous les types de fichiers ou pas.
- Oh, non. Je suis inquiet au sujet de la qualité. Comme je l'ai dit, je suis biaisé en faveur de Google, et je crois fermement que leurs fichiers de police sont de qualité supérieure. Un exemple est que la TTF, EOT, et WOFF fichiers que Google m'a offert pour mon de police, sont beaucoup plus petits, mais de bonne qualité que ceux fournis par la police de l'écureuil. Et ils contiennent tous les deux le même lot d'images.
- À droite à droite... je pense que la meilleure option est de télécharger l'ensemble des googlefontdirectory et de choisir les polices dont vous avez besoin.
- hmm ouais, laissez-moi voir.
- Je crois que l'url est désormais obsolète. Comme d'aujourd'hui, les polices sont sur Github github.com/google/fonts
InformationsquelleAutor honyovk
51

======= Mise à JOUR 2016-05-31 =======

J'ai fait un petit script PHP pour obtenir les liens de téléchargement à partir d'un Google Polices CSS import URL comme: https://fonts.googleapis.com/css?family=Roboto:400,700|Slabo+27px|Lato:400,300 italique,900italic

Vous pouvez utiliser cet outil ici: http://nikoskip.me/gfonts.php

Par exemple, si vous utilisez le ci-dessus import URL, vous obtiendrez ceci:

Je me suis fatigué à propos de la mise à jour de cette réponse sur chaque nouvelle version de Chrome, parce qu'ils ont toujours changer la façon dont vous pouvez usurper la chaîne de l'Agent Utilisateur, veuillez utiliser ce script à la place.

======= VIEILLE SOLUTION =======

À l'aide de DevTools de Chrome, vous pouvez remplacer l'Agent de l'Utilisateur.

Comment:
1. Obtenir de la police dont vous avez besoin à Google Polices de la page.
2. Vous obtiendrez une URL afin de les importer dans votre CSS, comme: http://fonts.googleapis.com/css?family=Cabin:500,700,500 italique,700italic
3. Ouvrir l'URL dans votre navigateur et vous verrez l'URL complète où vous pouvez télécharger la police.
4. Aller à des Outils de développement (F12) et appuyez sur la touche ECHAP
5. Sélectionnez "Émulation" de l'onglet, puis cliquez sur "Réseau" sous-onglet
6. Enfin sur Spoof user agent sélectionnez IE9 pour EOT format, Android 4 pour TTF et cette Chaîne de l'agent utilisateur SVG pour: 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 (merci anonyme)
- Awesomesauce! Est-ce à l'encontre de Google Polices TOS?
- Merci! Sauvé ma journée!
- +1 C'était génial!! Bonjour SVG (comme première option). Maintenant, comment faire pour la transformer en données d'url (sans la merde injecté) ...
- +1 @nikoskip Merci! Vous avez beaucoup m'aider!!! C'est que le script open source? Je veux vraiment savoir comment vous avez fait et de mettre un miroir sur mon site. Ce script doit être en ligne pour toujours.
- N'a pas voir le lien! Merci beaucoup! 😉
- Merci, mais pourquoi ne pas aller chercher le gras et en italique les polices de caractères pour la fft, svg, et eot?
- Je vais vérifier le script à ce sujet. Merci.
- Je viens de corrigé ce bug 😉
InformationsquelleAutor nikoskip

Comment obtenir de la police de caractères de l'url de téléchargement, y compris SVG et woff2.

Les user-agents requis pour télécharger les polices sont comme suit. source.

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/",
}

Ajouter ces useragents utilisant l'outil développeur d'internet explorer.

Comment télécharger plusieurs formats de polices web de l' (officiel) Polices Web de Google repo?

source

vous pouvez maintenant visiter https://fonts.googleapis.com/css?family=Open+Sans et usurper votre agent utilisateur, télécharger les polices en visitant l'url dans la @font-face.

Sinon google webfonts-helper fait tout pour vous.
Comment télécharger plusieurs formats de polices web de l' (officiel) Polices Web de Google repo?
Il y a un billet de blog très ici du réalisateur, où j'ai acquis de l'image.

Pourquoi voulez-vous auto-héberger?

Toujours utiliser un commun CA si possible, c'est beaucoup plus probable que votre police n'aurez même pas besoin de télécharger(mise en cache du navigateur).

Si vous êtes inquiet à propos de google envoie un mauvais police pour les utilisateurs, probablement parce qu'ils sont l'usurpation de leur user-agent, Puis il y a une autre option, et encore obtenir les avantages de l'utilisation de google d'hébergement.

Insérer le @font-face vous-même, il suffit d'utiliser les étapes ci-dessus pour trouver les polices google url et insérez-le dans le <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>

Cela vient avec ses risques de l'URL peut changer!

InformationsquelleAutor TarranJones

3

J'ai fait clone en ligne 🙂

https://bitbucket.org/Tymek/google-web-fonts/ Là vous allez!

InformationsquelleAutor Tymek

J'ai écrit un script PowerShell pour télécharger automatiquement les polices servi à plusieurs Agents Utilisateurs différents. Pour la police de base, il en arrive tous les quatre formats (woff, ttf, svg, eot). Google ne semble pas servir SVG et EOT fichiers pour les caractères gras et en italique poids.


$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")
        }
    }
}

Une fois qu'il est dans un .ps1 fichier, il peut être appelé avec les polices à télécharger comme arguments:

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

Le script de sortie de la CSS tiré depuis les serveurs de Google pour vous aider à déterminer quel fichier est (par exemple, dans mon cas, le SVG police a été tiré comme un fichier appelé "police").

Ceci est basé sur des scripts bash posté par RichardN et ldeck sur le blog Localement, La Mise En Cache De Google Web Fonts.

Pour référence, voici ldeck du script bash:


#!/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

Autre référence: À l'aide de HTML5 AppCache.

InformationsquelleAutor AaronSieb

1

Je ne suis pas affilié avec cette entreprise ou site web en aucune façon, mais j'ai été en mesure d'obtenir tous les formats dont j'avais besoin à onlinefontconverter.com.

J'avais besoin eot, svg, woff et formats ttf. J'ai déjà eu la ttf. J'ai téléchargé et le site créé le reste - - tous en quelques minutes.

InformationsquelleAutor Victor Stoddard

J'ai écrit un script python dans le cadre de mon travail sur le projet open-source MDIDX. il sera possible d'obtenir tous les formats de polices de police-la famille de Google Polices CDN. Il est naïf - brute-forcer les plates-formes communes " user-agents

Il peut être simplifiée comme suit:

import re
import os
import requests

def main():
    font_family = "Material Icons"
    output_directory = "fonts"
    download_fonts(font_family, output_directory)

def download_fonts(font_family, output_directory, output_file_name=None):
    if not os.path.isdir(output_directory):
        os.makedirs(output_directory)

    if not output_file_name:
        output_file_name = font_family.lower().replace(" ","-")

    user_agents = USER_AGENTS.splitlines()
    user_agents = map(lambda x: x, user_agents)

    font_urls = set()
    for user_agent in user_agents:
        url = 'https://fonts.googleapis.com/icon?family={}'.format("+".join(font_family.strip().split()))
        r = requests.get(url, headers={"user-agent": user_agent})
        r.raise_for_status()
        urls = re.findall('url\((.*?)\)', r.text)
        urls = map(str, urls)
        urls = filter(str, urls)
        font_urls.update(urls)

    fonts_map = {font_url.split('.')[-1].lower(): font_url for font_url in font_urls}

    for file_extension, url in fonts_map.items():
        file_path = os.path.join(output_directory, '{output_file_name}.{file_extension}'.format(output_file_name=output_file_name, file_extension=file_extension))
        _download_file(url, file_path)

USER_AGENTS = """
Mozilla/5.0 (X11; U; Linux x86_64; en-US; rv:1.9.1.3) Gecko/20090913 Firefox/3.5.3
Mozilla/5.0 (Windows; U; Windows NT 6.1; en; rv:1.9.1.3) Gecko/20090824 Firefox/3.5.3 (.NET CLR 3.5.30729)
Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US; rv:1.9.1.3) Gecko/20090824 Firefox/3.5.3 (.NET CLR 3.5.30729)
Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.1.1) Gecko/20090718 Firefox/3.5.1
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/532.1 (KHTML, like Gecko) Chrome/4.0.219.6 Safari/532.1
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; InfoPath.2)
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; SLCC1; .NET CLR 2.0.50727; .NET CLR 1.1.4322; .NET CLR 3.5.30729; .NET CLR 3.0.30729)
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.2; Win64; x64; Trident/4.0)
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; SV1; .NET CLR 2.0.50727; InfoPath.2)Mozilla/5.0 (Windows; U; MSIE 7.0; Windows NT 6.0; en-US)
Mozilla/4.0 (compatible; MSIE 6.1; Windows XP)
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.246
Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2227.0 Safari/537.36
Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_7; da-dk) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1
Opera/9.80 (Windows NT 6.1; U; es-ES) Presto/2.9.181 Version/12.00
Mozilla/5.0 (Linux; U; Android 2.3.4; fr-fr; HTC Desire Build/GRJ22) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
Mozilla/5.0 (Linux; Android 7.0; SAMSUNG SM-N920C Build/NRD90M) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/6.2 Chrome/56.0.2924.87 Mobile Safari/537.36
Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.31 (KHTML, like Gecko) Chrome/26.0.1410.43 BIDUBrowser/2.x Safari/537.31
Mozilla/5.0 (Linux; U; Android 4.4.2; zh-cn; GT-I9500 Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko)Version/4.0 MQQBrowser/5.0 QQ-URL-Manager Mobile Safari/537.36
Mozilla/5.0 (Android 8.0.0; Tablet; rv:57.0) Gecko/57.0 Firefox/57.0
Mozilla/5.0 (Android 8.1.0; Mobile; rv:61.0) Gecko/61.0 Firefox/61.0
"""

def _download_file(url, file_path):
    r = requests.get(url)
    r.raise_for_status()
    with open(file_path, 'wb') as f:
        f.write(r.content)

if __name__ == '__main__':
    main()

Comment télécharger plusieurs formats de polices web de l' (officiel) Polices Web de Google repo?

Les choses à faire pour me faire ce petit script un heroku web app pour répondre avec un zip avec tous les formats de polices

InformationsquelleAutor Jossef Harush

Vous devez vous connecter pour publier un commentaire.