Google web yazı tiplerini kendi sunucumda nasıl barındırabilirim?

Bir intranet uygulamasında bazı google yazı tiplerini kullanmam gerekiyor. İstemciler internet bağlantısına sahip olabilir veya olmayabilir. Lisans koşullarını okurken, yasal olarak izin verildiği anlaşılıyor.

Cevabımın çok eski olduğunu lütfen unutmayın.

Aşağıda teknik olarak daha karmaşık başka cevaplar da vardır, örneğin:

• neverpanic / google-font-indir
• google-yazıtipinin-yardımcı
• localfont

bu yüzden şu anda kabul edilen cevap olduğu gerçeğinin size en iyi cevap olduğu izlenimini vermeyin.

Artık google'ın tüm font setini github üzerinden google / font deposundan da indirebilirsiniz . Ayrıca yazı tiplerinin ~ 420MB zip anlık görüntüsünü sağlarlar .

Önce yazı tipi seçiminizi sıkıştırılmış bir paket olarak indirir ve size bir dizi gerçek yazı tipi sağlar. Onları herkese açık bir yere, css'nizden bağlanabileceğiniz bir yere kopyalayın.

Google webfont indirme sayfasında şöyle bir ekleme bağlantısı bulacaksınız:

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

Yazı tiplerini tanımlayan bir grup CSS'ye bağlanır @font-face.

Bunları kendi CSS'nize kopyalayıp yapıştırmak ve doğru yazı tipi dosyasını ve biçim türlerini içerecek şekilde URL'leri değiştirmek için bir tarayıcıda açın.

Yani bu:

@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');
}

bu olur:

/* 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');
}

Gördüğünüz gibi, yazı tiplerini kendi sisteminizde bu şekilde barındırmanın bir dezavantajı, kendinizi gerçek tür biçimiyle sınırlamanız, google webfont hizmeti ise erişilecek cihaz tarafından hangi biçimlerin iletileceğini belirler.

Ayrıca, .htaccesshataların Chrome Dev Araçları'nda ortaya çıkmasını önlemek için mime türleri içeren yazı tiplerini tutan dizime bir dosya eklemek zorunda kaldım .

Bu çözüm için yalnızca gerçek tür gereklidir, ancak farklı yazı tiplerini de dahil etmek istediğinizde daha fazlasını tanımlamak zarar vermez font-awesome.

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

Tüm font çeşitlerini indirmenize yardımcı olacak bir localfont.com aracı vardır . Uygulama için ilgili CSS'yi de üretir. Kullanımdan kaldırılan

localfont çalışmıyor. Bunun yerine, Damir anlaşılacağı kullanabileceğiniz google-Webfonts-yardımcı

Harika bir çözüm google-webfonts yardımcısıdır .

Birden fazla yazı tipi varyantı seçmenize izin verir, bu da çok zaman kazandırır.

Google'ın sunucularında CSS dosyasını farklı kullanıcı aracılarıyla getiren bir bash betiği yazdım , farklı yazı tipi biçimlerini yerel bir dizine indirdi ve bunları içeren bir CSS dosyası yazdım . Komut dosyasının Bash 4.x sürümüne ihtiyacı olduğunu unutmayın.

Komut dosyası için https://neverpanic.de/blog/2014/03/19/downloading-google-web-fonts-for-local-hosting/ adresine bakın (burada çoğaltmıyorum, bu yüzden sadece bir yere ihtiyacım olduğunda).

Düzenleme: https://github.com/neverpanic/google-font-download adresine taşındı

CSS dosyasının içeriği (URL'yi dahil et), hangi tarayıcıdan görüntülediğime bağlıdır. Örneğin, http://fonts.googleapis.com/css?family=Open+Sans'ı Chrome kullanarak tararken dosya yalnızca WOFF bağlantıları içeriyordu. Internet Explorer kullanarak (aşağıda) hem EOT hem de WOFF içeriyordu. İndirmek için tüm bağlantıları tarayıcımın içine yapıştırdım.

@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');
}

Kendi web yazı tiplerinizi barındırdığınızda, her yazı tipi türüne doğru bir şekilde bağlanmanız , eski tarayıcı hatalarıyla ilgilenmeniz vb.

Yazı tipi lisansının koşullarına (genellikle OFL) bağlı kaldığınız sürece yasal olarak izin verilir.

Bir dizi web font formatına ihtiyacınız olacak ve Font Squirrel Webfont Generator bunları üretebilir.

Ancak OFL, yazı tiplerinin değiştirilmeleri durumunda yeniden adlandırılmasını gerektiriyordu ve oluşturucuyu kullanmak, bunları değiştirmek anlamına geliyor.

PHP'de otomatik olarak hem CSS hem de yazı tiplerini ( hem ima edilen hem de ima edilmeyen ) Google'dan indiren @neverpanic benzeri bir komut dosyası var . Daha sonra User Agent tabanlı kendi sunucunuzdan doğru CSS ve yazı tiplerini sunar. Kendi önbelleğini korur, böylece bir User Agent'ın yazı tipleri ve CSS'si yalnızca bir kez indirilir.

Erken bir aşamada, ancak burada bulunabilir: DaAwesomeP / php-offline-fonts

Tüm yazı tiplerini (veya bazılarını) kendi sunucunuzda barındırmak istediğinizde, bu depodan bir yazı tipi indirir ve istediğiniz gibi kullanırsınız: https://github.com/praisedpk/Local-Google-Fonts

Google Yazı Tipleri ile birlikte gelen kaldıraç tarayıcı önbellek sorununu gidermek için bunu yapmak istiyorsanız, alternatif yazı tipleri CDN'sini kullanabilir ve yazı tiplerini aşağıdaki gibi ekleyebilirsiniz :

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

Veya aşağıdaki gibi belirli bir yazı tipi:

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

Grunt görevinde grunt-local-googlefont'u kullandım .

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');
 };

Ardından, bunları almak için:

grunt local-googlefont:opensans

Unutmayın, orijinalinden bir çatal kullanıyorum, bu da isimlerinde boşluk bulunan yazı tiplerini alırken daha iyi çalışıyor.

Aslında tüm yazı tipi biçimi çeşitlerini doğrudan Google'dan indirebilir ve sunucunuzdan sunmak için bunları css'nize ekleyebilirsiniz. Bu şekilde, Google'ın sitenizin kullanıcılarını izlemesi konusunda endişelenmenize gerek kalmaz. Ancak, olumsuz, kendi servis hızınızı yavaşlatabilir. Yazı tipleri kaynaklar için oldukça talepkardır. Bu konuda henüz bir test yapmadım ve başkalarının da benzer düşünceleri olup olmadığını merak ediyorum.

Benim çözüm TTF dosyalarını google web yazı tiplerinden indirmek ve sonra onlinefontconverter.com kullanmaktı .

Https://fonts.googleapis.com/css?family=Roboto:400,700|Slabo+27px|Lato:400,300italic.900italic gibi bir Google Fonts CSS içe aktarma URL'sinden indirme bağlantıları almak için küçük bir PHP komut dosyası yaptım.

Bu aracı burada kullanabilirsiniz: http://nikoskip.me/gfonts.php

Örneğin, yukarıdaki içe aktarma URL'sini kullanırsanız, bunu alırsınız:

Webpack kullanıyorsanız, bu projeyle ilgilenebilirsiniz: https://github.com/KyleAMathews/typefaces

Örneğin Roboto yazı tipini kullanmak istediğinizi söyleyin:

npm install typeface-roboto --save

Ardından, uygulamanızın giriş noktasına (ana js dosyası) aktarın:

import 'typeface-roboto'

PHP ile geliştirilen betiği takip edebilirsiniz. Komut dosyasını kullanarak herhangi bir google yazı tipini indirebilirsiniz. Yazı tiplerini indirecek ve bir CSS dosyası oluşturacak ve zip için arşivleyecektir.
Kaynak kodunu GitHub https://github.com/sourav101/google-fonts-downloader adresinden indirebilirsiniz.

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

K0pernicus'a ek olarak en iyi servis-yerel önermek istiyorum . Ayrıca web sunucusu operatörlerinin Google web yazı tiplerini kendi web sunucularından indirip sunmalarını sağlayan bir bash (v4) betiğidir. Ancak diğer bash betiğine ek olarak, kullanıcının güncel yazı tipi dosyalarının ve css dosyalarının sunumunu tamamen otomatikleştirmesini (cron ve benzeri) sağlar.

Bir Google Web Yazı Tipi bağlantısından tüm yazı tiplerini indirmek için düz Java ile yazılmış çok basit bir komut dosyası vardır (birden çok yazı tipi desteklenir). Ayrıca CSS dosyasını indirir ve yerel dosyalara uyarlar. Kullanıcı aracısı sadece WOFF2 dışındaki dosyaları da alacak şekilde uyarlanabilir. Bkz. Https://github.com/ssc-hrep3/google-font-download

Sonuçta elde edilen dosyalar bir derleme işlemine kolayca eklenebilir (örneğin, bir web paketi derlemesi gibi vue-webpack).

Kaynak yazı tiplerini https://github.com/google/fonts adresinden indirebilirsiniz.

Bundan sonra, font-rangerbüyük Unicode yazı tipinizi birden fazla alt kümeye (örn. Latin, kiril) bölmek için aracı kullanın. Araçla aşağıdakileri yapmalısınız:

• Desteklediğiniz her dil için alt kümeler oluşturun
• Bant genişliğinden tasarruf etmek için unicode aralığı alt kümesini kullanma
• Yazı tiplerinizdeki şişliği kaldırın ve web için optimize edin
• Yazı tiplerinizi sıkıştırılmış woff2 biçimine dönüştürün
• Eski tarayıcılar için .woff yedeği sağlayın
• Yazı tipi yükleme ve oluşturmayı özelleştirme
• @ Font-face kurallarıyla CSS dosyası oluşturun
• Web yazı tiplerini kendiniz barındırın veya yerel olarak kullanın

Yazı Tipi Korucusu : https://www.npmjs.com/package/font-ranger

Not: Node.js API'sını kullanarak bunu otomatikleştirebilirsiniz