Làm cách nào để lưu trữ phông chữ web google trên máy chủ của riêng tôi?

Tôi cần sử dụng một số phông chữ google trên ứng dụng mạng nội bộ. Các khách hàng có thể có hoặc không có kết nối internet. Đọc các điều khoản cấp phép, có vẻ như nó được phép hợp pháp.

Xin lưu ý rằng câu trả lời của tôi đã già đi rất nhiều.

Có những câu trả lời khác kỹ thuật phức tạp hơn dưới đây, ví dụ:

• Neverpanic / google-font-download
• google-webfont-helper
• địa phương

vì vậy đừng để thực tế rằng đây là câu trả lời hiện đang được chấp nhận cho bạn cảm giác rằng đây vẫn là câu trả lời hay nhất.

Bây giờ bạn cũng có thể tải xuống toàn bộ bộ phông chữ của google thông qua trên github tại kho lưu trữ google / font của họ . Họ cũng cung cấp ảnh chụp nhanh zip ~ 420 MB cho phông chữ của họ .

Trước tiên, bạn tải xuống lựa chọn phông chữ của mình dưới dạng gói nén, cung cấp cho bạn một loạt các phông chữ loại đúng. Sao chép chúng ở nơi công cộng, nơi nào đó bạn có thể liên kết từ css của mình.

Trên trang tải xuống google webfont, bạn sẽ tìm thấy một liên kết bao gồm như vậy:

http://fonts.googleapis.com/css?family=Cantarell:400,700,400italic,700italic|Candal

Nó liên kết đến một CSS xác định các phông chữ thông qua một loạt các @font-facekhuyết điểm.

Mở nó trong trình duyệt để sao chép và dán chúng vào CSS của riêng bạn và sửa đổi các url để bao gồm các tệp phông chữ và định dạng đúng.

Vậy đây:

@font-face {
  font-family: 'Cantarell';
  font-style: normal;
  font-weight: 700;
  src: local('Cantarell Bold'), local('Cantarell-Bold'), url(http://themes.googleusercontent.com/static/fonts/cantarell/v3/Yir4ZDsCn4g1kWopdg-ehHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

trở thành thế này:

/* Your local CSS File */
@font-face {
    font-family: 'Cantarell';
    font-style: normal;
    font-weight: 700;
    src: local('Cantarell Bold'), local('Cantarell-Bold'), url(../font/Cantarell-Bold.ttf) format('truetype');
}

Như bạn có thể thấy, nhược điểm của việc lưu trữ phông chữ trên hệ thống của bạn theo cách này là bạn tự giới hạn định dạng loại thực, trong khi dịch vụ google webfont xác định bởi thiết bị truy cập sẽ truyền các định dạng nào.

Hơn nữa, tôi đã phải thêm một .htaccesstệp vào thư mục chứa các phông chữ chứa các loại mime để tránh lỗi xuất hiện trong Chrome Dev Tools.

Đối với giải pháp này, chỉ có loại đúng là cần thiết, nhưng việc xác định nhiều hơn không gây hại khi bạn muốn bao gồm các phông chữ khác nhau, như thế nào font-awesome.

#.htaccess
AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff

Có một công cụ localfont.com để giúp bạn tải xuống tất cả các biến thể phông chữ. Nó cũng tạo ra CSS tương ứng để thực hiện. không dùng nữa

localfont là xuống. Thay vào đó, như Damir gợi ý , bạn có thể sử dụng google-webfonts-helper

Giải pháp tuyệt vời là google-webfonts-helper .

Nó cho phép bạn chọn nhiều hơn một biến thể phông chữ, giúp tiết kiệm rất nhiều thời gian.

Tôi đã viết một tập lệnh bash tìm nạp tệp CSS trên các máy chủ của Google với các tác nhân người dùng khác nhau, tải các định dạng phông chữ khác nhau vào một thư mục cục bộ và viết một tệp CSS bao gồm cả chúng. Lưu ý rằng tập lệnh cần Bash phiên bản 4.x.

Xem https://neverpanic.de/blog/2014/03/19/doading-google-web-fonts-for-local-hosting/ để biết tập lệnh (Tôi không sao chép nó ở đây vì vậy tôi chỉ phải cập nhật nó trong một nơi khi tôi cần).

Chỉnh sửa: Đã chuyển sang https://github.com/neverpanic/google-font-doad

Nội dung của tệp CSS (từ URL bao gồm) phụ thuộc vào trình duyệt tôi xem từ đó. Ví dụ: khi duyệt đến http://fonts.googleapis.com/css?family=Open+Sans bằng Chrome, tệp chỉ chứa các liên kết WOFF. Sử dụng Internet Explorer (bên dưới), nó bao gồm cả EOT và WOFF. Tôi đã dán tất cả các liên kết vào trình duyệt của tôi để tải chúng xuống.

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3fY6323mHUZFJMgTvxaG2iE.eot);
  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3fY6323mHUZFJMgTvxaG2iE.eot) format('embedded-opentype'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

Khi bạn lưu trữ phông chữ web của riêng mình, bạn cần liên kết chính xác với từng loại phông chữ , xử lý các lỗi trình duyệt cũ, v.v. Khi bạn sử dụng Google Web Fonts (được lưu trữ bởi Google), Google sẽ tự động liên kết với các loại phông chữ chính xác cho trình duyệt đó.

Nó được phép hợp pháp miễn là bạn tuân thủ các điều khoản của giấy phép phông chữ - thường là OFL.

Bạn sẽ cần một tập hợp các định dạng phông chữ web và Trình tạo phông chữ Web Squirrel có thể tạo ra các định dạng này.

Nhưng OFL yêu cầu các phông chữ được đổi tên nếu chúng được sửa đổi và sử dụng trình tạo có nghĩa là sửa đổi chúng.

Tôi có một đoạn script được viết bằng PHP tương tự như @neverpanic tự động tải xuống cả CSS và phông chữ ( cả gợi ý và không bị xóa ) từ Google. Sau đó, nó phục vụ CSS và phông chữ chính xác từ máy chủ của bạn dựa trên Tác nhân người dùng. Nó giữ bộ đệm riêng, do đó phông chữ và CSS của Tác nhân người dùng sẽ chỉ được tải xuống một lần.

Nó đang ở giai đoạn sớm, nhưng nó có thể được tìm thấy ở đây: DaAw đũaP / php-offline-phông chữ

Khi bạn muốn lưu trữ tất cả các phông chữ (hoặc một số trong số chúng) tại máy chủ của riêng bạn, bạn tải xuống các phông chữ từ repo này và sử dụng nó theo cách bạn muốn: https://github.com/praisedpk/Local-Google-Fonts

Nếu bạn chỉ muốn làm điều này để khắc phục sự cố bộ nhớ đệm trình duyệt đi kèm với Google Fonts, bạn có thể sử dụng các phông chữ CDN thay thế và bao gồm các phông chữ như:

<link href="https://pagecdn.io/lib/easyfonts/fonts.css" rel="stylesheet" />

Hoặc một phông chữ cụ thể, như:

<link href="https://pagecdn.io/lib/easyfonts/lato.css" rel="stylesheet" />

Tôi đã sử dụng grunt-local-googlefont trong một nhiệm vụ grunt.

module.exports = function(grunt) {

    grunt.initConfig({
       pkg: grunt.file.readJSON('package.json'),

        "local-googlefont" : {
            "opensans" : {
                "options" : {
                    "family" : "Open Sans",
                    "sizes" : [
                        300,
                        400,
                        600
                    ],
                    "userAgents" : [
                        "Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0)",  //download eot
                        "Mozilla/5.0 (Linux; U; Android 4.1.2; nl-nl; GT-I9300 Build/JZO54K) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30", //download ttf
                        "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1944.0 Safari/537.36" //download woff and woff2
                    ],
                    "cssDestination" : "build/fonts/css",
                    "fontDestination" : "build/fonts",
                    "styleSheetExtension" : "css",
                    "fontDestinationCssPrefix" : "fonts"

                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-local-googlefont');
 };

Sau đó, để lấy chúng:

grunt local-googlefont:opensans

Lưu ý, tôi đang sử dụng một ngã ba từ bản gốc, hoạt động tốt hơn khi truy xuất phông chữ có khoảng trắng trong tên của chúng.

Bạn thực sự có thể tải xuống tất cả các biến thể định dạng phông chữ trực tiếp từ Google và đưa chúng vào css của bạn để phục vụ từ máy chủ của bạn. Bằng cách đó, bạn không phải lo lắng về việc Google theo dõi người dùng trang web của mình. Tuy nhiên, nhược điểm có thể làm chậm tốc độ phục vụ của chính bạn. Phông chữ khá khắt khe về tài nguyên. Tôi chưa thực hiện bất kỳ thử nghiệm nào trong vấn đề này và tự hỏi liệu có ai có suy nghĩ tương tự không.

Giải pháp của tôi là tải xuống các tệp TTF từ phông chữ web của google và sau đó sử dụng onlinefontconverter.com .

Tôi đã tạo một tập lệnh PHP nhỏ để nhận các liên kết tải xuống từ URL nhập CSS Phông chữ của Google như: https://fonts.googleapis.com/css?family=Roboto:400,700|Slabo+27px|Lato:400,300italic,900italic

Bạn có thể sử dụng công cụ này tại đây: http://nikoskip.me/gfonts.php

Ví dụ: nếu bạn sử dụng URL nhập trên, bạn sẽ nhận được điều này:

Nếu bạn đang sử dụng Webpack, bạn có thể quan tâm đến dự án này: https://github.com/KyleAMathews/typefaces

Ví dụ: bạn muốn sử dụng phông chữ Roboto:

npm install typeface-roboto --save

Sau đó, chỉ cần nhập nó trong điểm vào ứng dụng của bạn (tệp js chính):

import 'typeface-roboto'

Bạn có thể theo kịch bản được phát triển bằng PHP. Nơi bạn có thể tải xuống bất kỳ phông chữ google nào bằng cách sử dụng tập lệnh. Nó sẽ tải xuống các phông chữ và tạo một tệp CSS và lưu trữ vào zip.
Bạn có thể tải xuống mã nguồn từ GitHub https://github.com/sourav101/google-fonts-doader

$obj = new GoogleFontsDownloader;

if(isset($_GET['url']) && !empty($_GET['url']))
{
    $obj->generate($_GET['url']);
}

if(isset($_GET['download']) && !empty($_GET['download']) && $_GET['download']=='true')
{
    $obj->download();
}

/**
* GoogleFontsDownloader
* Easy way to download any google fonts.
* @author     Shohrab Hossain
* @version    1.0.0 
*/
class GoogleFontsDownloader
{
    private $url      = '';
    private $dir      = 'dist/';
    private $fontsDir = 'fonts/';
    private $cssDir   = 'css/';
    private $fileName = 'fonts.css';
    private $content  = '';
    private $errors   = '';
    private $success  = '';
    public  $is_downloadable  = false;

    public function __construct()
    {
        ini_set('allow_url_fopen', 'on');
        ini_set('allow_url_include', 'on');
    }

    public function generate($url = null)
    {
        if (filter_var($url, FILTER_VALIDATE_URL) === FALSE) 
        {
            $this->errors .= "<li><strong>Invalid url!</strong> $url</li>";
        }
        else
        {
            $this->url = $url;
            // delete previous files
            $this->_destroy();
            // write font.css
            $this->_css();
            // write fonts
            $this->_fonts();
            // archive files
            $this->_archive();
        }  
        // show all messages
        $this->_message();
    }

    public function download()
    { 
        // Download the created zip file
        $zipFileName = trim($this->dir, '/').'.zip';
        if (file_exists($zipFileName))
        {
            header("Content-type: application/zip");
            header("Content-Disposition: attachment; filename = $zipFileName");
            header("Pragma: no-cache");
            header("Expires: 0");
            readfile("$zipFileName");

            // delete file 
            unlink($zipFileName);
            array_map('unlink', glob("$this->dir/*.*"));
            rmdir($this->dir);

        } 
    }   

    private function _archive()
    {
        if (is_dir($this->dir))
        {
            $zipFileName = trim($this->dir, '/').'.zip';
            $zip = new \ZipArchive(); 
            if ($zip->open($zipFileName, ZipArchive::CREATE) === TRUE) 
            {
                $zip->addGlob($this->dir. "*.*");
                $zip->addGlob($this->dir. "*/*.*");
                if ($zip->status == ZIPARCHIVE::ER_OK)
                {
                    $this->success .= '<li>Zip create successful!</li>';
                    $this->is_downloadable = true;
                }
                else 
                {
                    $this->errors .= '<li>Failed to create to zip</li>';
                } 
            } 
            else 
            {
                $this->errors .= '<li>ZipArchive not found!</li>';
            }  
            $zip->close(); 
        }
        else
        {
            $this->errors .= "<li><strong>File</strong> not exists!</li>";
        } 
    }   

    private function _css()
    {  
        $filePath = $this->dir.$this->cssDir.$this->fileName;
        $content  = $this->_request($this->url);
        if (!empty($content))
        {
            if (file_put_contents($filePath, $content))
            {
                $this->success .= "<li>$this->fileName generated successful!</li>";
                $this->content = $content; 
            }
            else
            {
                $this->errors .= '<li>Permission errro in $this->fileName! Unable to write $filePath.</li>';
            }
        }
        else
        {
            $this->errors .= '<li>Unable to create fonts.css file!</li>';
        }
    }

    private function _fonts()
    {
        if (!empty($this->content))
        {
            preg_match_all('#\bhttps?://[^\s()<>]+(?:\([\w\d]+\)|([^[:punct:]\s]|/))#', $this->content, $match);
            $gFontPaths = $match[0];
            if (!empty($gFontPaths) && is_array($gFontPaths) && sizeof($gFontPaths)>0)
            {
                $count = 0;
                foreach ($gFontPaths as $url) 
                {
                    $name     = basename($url);
                    $filePath = $this->dir.$this->fontsDir.$name;
                    $this->content = str_replace($url, '../'.$this->fontsDir.$name, $this->content);

                    $fontContent  = $this->_request($url);
                    if (!empty($fontContent))
                    {
                        file_put_contents($filePath, $fontContent);
                        $count++;
                        $this->success .= "<li>The font $name downloaded!</li>";
                    }
                    else
                    {
                        $this->errors .= "<li>Unable to download the font $name!</li>";
                    } 
                }

                file_put_contents($this->dir.$this->cssDir.$this->fileName, $this->content);
                $this->success .= "<li>Total $count font(s) downloaded!</li>";
            }
        }
    }

    private function _request($url)
    {
        $ch = curl_init(); 
        curl_setopt_array($ch, array(
            CURLOPT_SSL_VERIFYPEER => FALSE,
            CURLOPT_HEADER         => FALSE,
            CURLOPT_FOLLOWLOCATION => TRUE,
            CURLOPT_URL            => $url,
            CURLOPT_REFERER        => $url,
            CURLOPT_RETURNTRANSFER => TRUE,
        ));
        $result = curl_exec($ch);
        curl_close($ch);

        if (!empty($result))
        {
            return $result;
        } 
        return false;
    }

    private function _destroy()
    {
        $cssPath = $this->dir.$this->cssDir.$this->fileName;
        if (file_exists($cssPath) && is_file($cssPath))
        {
            unlink($cssPath);
        } 
        else
        {
            mkdir($this->dir.$this->cssDir, 0777, true);
        }

        $fontsPath = $this->dir.$this->fontsDir;
        if (!is_dir($fontsPath))
        {
            mkdir($fontsPath, 0777, true);
        }
        else
        {
            array_map(function($font) use($fontsPath) {
                if (file_exists($fontsPath.$font) && is_file($fontsPath.$font))
                {
                    unlink($fontsPath.$font);
                }
            }, glob($fontsPath.'*.*')); 
        }
    }

    private function _message()
    {
        if (strlen($this->errors)>0)
        {
            echo "<div class='alert alert-danger'><ul>$this->errors</ul></div>";
        }  
        if (strlen($this->success)>0)
        {
            echo "<div class='alert alert-success'><ul>$this->success</ul></div>";
        } 
    } 
}

Ngoài k0pernicus tôi muốn đề xuất địa phương phục vụ tốt nhất . Đây cũng là tập lệnh bash (v4) để cho phép các nhà khai thác máy chủ web tải xuống và phục vụ phông chữ web của Google từ máy chủ web của riêng họ. Nhưng ngoài các tập lệnh bash khác, nó cho phép người dùng tự động hóa hoàn toàn (thông qua cron và như vậy) việc phục vụ các tệp phông chữ cập nhật và các tệp css.

Có một tập lệnh rất đơn giản, được viết bằng Java đơn giản, để tải xuống tất cả các phông chữ từ liên kết Google Web Font (hỗ trợ nhiều phông chữ). Nó cũng tải tập tin CSS và điều chỉnh nó thành tập tin cục bộ. Tác nhân người dùng có thể được điều chỉnh để nhận các tệp khác ngoài WOFF2. Xem https://github.com/ssc-hrep3/google-font-doad

Các tệp kết quả có thể dễ dàng được thêm vào quá trình xây dựng (ví dụ như xây dựng gói webpack vue-webpack).

Bạn có thể tải xuống phông chữ nguồn từ https://github.com/google/fonts

Sau đó, sử dụng font-rangercông cụ để phân chia phông chữ Unicode lớn của bạn thành nhiều tập con (ví dụ: latin, cyrillic). Bạn nên làm như sau với công cụ:

• Tạo tập hợp con cho mỗi ngôn ngữ bạn hỗ trợ
• Sử dụng tập hợp con phạm vi unicode để tiết kiệm băng thông
• Xóa bloat khỏi phông chữ của bạn và tối ưu hóa chúng cho web
• Chuyển đổi phông chữ của bạn sang định dạng woff2 được nén
• Cung cấp dự phòng .woff cho các trình duyệt cũ hơn
• Tùy chỉnh tải và hiển thị phông chữ
• Tạo tệp CSS với quy tắc @ font-face
• Tự lưu trữ phông chữ web hoặc sử dụng chúng cục bộ

Kiểm lâm phông chữ : https://www.npmjs.com/package/font-ranger

PS Bạn cũng có thể tự động hóa việc này bằng API Node.js