可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I've learnt that Google automatically serves TTF, EOT, WOFF, or SVG font files depending on the browser / device it's accessed from.

Now I am planning to host and serve the font files from my server itself, for which I would first have to download all the file formats of the web font(s).

How or where can I download the 4 file formats for a web font that I would like to use?

PS: By using different browsers -- Chrome, IE9 and Safari (dev - iPhone UA), I was able to get the WOFF, EOT and TTF formats. No luck with the SVG format though. It would be awesome if there's an even simpler way.

EDIT: Oh, and by the way, I do know that I can download various formats from fontsquirrel, but I am talking about downloading from the official repo here.

回答1:

You can clone the Google webfonts directory at http://code.google.com/p/googlefontdirectory/

You can also get single font files at http://code.google.com/p/googlefontdirectory/source/browse/#font_name

回答2:

======= UPDATED 2016-05-31 =======

I made a tiny PHP script to get download links from a Google Fonts CSS import URL like: https://fonts.googleapis.com/css?family=Roboto:400,700|Slabo+27px|Lato:400,300italic,900italic

You can use this tool here: http://nikoskip.me/gfonts.php

For instance, if you use the above import URL, you will get this:

I got tired about updating this answer on each new release of Chrome, because they always change the way you can spoof the User Agent string, so please use this script instead.

======= OLD SOLUTION =======

Using DevTools from Chrome you can override the User Agent.

How to:

Get the font that you need at Google Fonts page.
You will get an URL to import in your CSS, like: http://fonts.googleapis.com/css?family=Cabin:500,700,500italic,700italic
Open that URL in your browser and you will see the full URL where you can actually download the font.
Go to Developer Tools (F12) and press ESC
Select "Emulation" tab and then click on "Network" sub-tab
Finally on Spoof user agent select IE9 for EOT format, Android 4 for TTF and this UA String for 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 (thanks anonymous)

回答3:

How to get the font download urls, including SVG and woff2.

The user-agents required to download each font are as follows. 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/",
}

Add these useragents using devtool.

source

you can now visit https://fonts.googleapis.com/css?family=Open+Sans and spoof your user agent, download the fonts by visiting the url found in the @font-face.

Alternatively google-webfonts-helper does it all for you. There's a great blog post here from the developer where I acquired the image.

Why do you want to self host?

Always use a common CDN if possible, its a lot more likely that your font won't even need downloading(browser cached).

If you are worried about google sending the wrong font to users, most likely because they are spoofing their user-agent, Then there in another option and still get the benefits of using google hosting.

Insert the @font-face yourself, just use the steps above to find the google font url and insert this into the <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>

This comes with its risks as the URLS may change!

回答4:

I made online clone :)

https://bitbucket.org/Tymek/google-web-fonts/ There you go!

回答5:

I am not affiliate with this business or website in anyway, but I was able to get all of the formats I needed at onlinefontconverter.com.

I needed eot, svg, woff and ttf formats. I already had the ttf. I uploaded it and the site created the rest -- all in a few minutes.

回答6:

I wrote a PowerShell script to automatically download the fonts served to several different User Agents. For the basic font, it gets all four formats (woff, ttf, svg, eot). Google doesn't seem to serve SVG and EOT files for the bold and italic weights.


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

Once it's in a .ps1 file, it can be called with the fonts to download as arguments:

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

The script will output the CSS pulled from Google's servers to help you figure out which file is which (e.g. in my case the SVG font was pulled as a file called "font").

This is based on bash scripts posted by RichardN and ldeck on the blog post Locally Caching Google Web Fonts.

For reference, here is ldeck's bash script:


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

Further reference: Using HTML5 AppCache.