Bir Google yazı tipini indirme ve bunu kullanan bir çevrimdışı site oluşturma

Bir şablon var ve böyle bir Google yazı tipi için bir referans var:

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300' rel='stylesheet' type='text/css'>

Her zaman çevrimdışı çalışan sayfalarımda nasıl indirip kullanabilirim?

Google Fonts - http://www.google.com/fonts/ adresine gidin , beğendiğiniz yazı tipini koleksiyonunuza ekleyin ve indir düğmesine basın. Ve sonra sadece bu yazı tipini web sayfanıza bağlamak için @fontface kullanın. Btw, kullandığınız bağlantıyı açarsanız, @fontface kullanımına bir örnek göreceksiniz

http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300

Örnek olarak

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
}

URL adresini indirdiğiniz yazı tipi dosyasındaki yerel bağlantıyla değiştirin.

Daha da kolaylaştırabilirsiniz.

Sadece dosyayı indirin, bağladınız:

http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300

Opensans.css ya da öylesine adlandırın.

Ardından, url () içindeki bağlantıları font dosyalarına giden yolunuza değiştirmeniz yeterlidir.

Ve sonra örnek dizenizi değiştirin:

<link href='opensans.css' rel='stylesheet' type='text/css'>

Google webfonts yardımcısına göz atın

Google'ın her web yazı tipini indirmenize izin verir ve uygulama için css kodu önerir. Bu araç aynı zamanda tüm formatları sorunsuz bir şekilde indirmenize izin verir.

Hiç Google'ın web yazı tiplerini nerede barındırdığını bilmek istediniz mi? Bir yazı tipi varyantının tüm .eot, .woff, .woff2, .svg, .ttf dosyalarını doğrudan google'dan indirmek istiyorsanız bu hizmet kullanışlı olabilir (normalde User-Agent'ınız en iyi formatı belirler).

Ayrıca Github sayfalarına da göz atın .

Bunu başarmak için adım adım bir yol buldum (1 yazı tipi için):
( 9 Eylül 2013 itibariyle )

1. Yazı tipinizi şurada seçin: Http://www.google.com/fonts adresinden
2. "Koleksiyona ekle" mavi düğmesini kullanarak istediğinizi koleksiyonunuza ekleyin
3. "Koleksiyondan kaldır" düğmesinin yanındaki "Tüm stilleri görüntüle" düğmesini tıklayın ve 'kalın' gibi ihtiyacınız olabilecek diğer stilleri seçtiğinizden emin olun ...
4. Sayfanın sağ alt kısmındaki 'Kullan' sekmesini tıklayın
5. Aşağı ok resmi bulunan üstteki indirme düğmesini tıklayın
6. Görüntülenen açılır mesajda "zip dosyası" nı tıklayın
7. Açılır pencerede "Kapat" düğmesini tıklayın
8. "Standrd | @import | Javascript" 3 sekmesini görene kadar sayfayı yavaşça kaydırın.
9. "@İmport" sekmesini tıklayın
10. Arasındaki URL'yi seçin ve kopyalayın 'url(' ve')'
11. Yeni bir sekmede adres çubuğuna kopyalayın ve oraya gidin
12. "Dosya> Sayfayı farklı kaydet ..." yapın ve "istenen yazı tipi.css" olarak adlandırın (uygun şekilde değiştirin)
13. İndirdiğiniz fontlar .zip dosyasını açın (.ttf ayıklanmalıdır)
14. " Http://ttf2woff.com/ adresine gidin. Http://ttf2woff.com/ ve zip'ten ayıklanan tüm .ttf dosyalarını .woff'a dönüştürün
15. Düzen desiredfontname.cssve aralarında [içindeki herhangi url yerine 'url('ve')' ] Eğer ttf2woff.com bindi düşen çevrilmiş .woff dosyası ile; yazdığınız yol sunucunuza göre olmalıdır doc_root
16. Dosyayı kaydedin ve son yerine taşıyın ve ilgili dosyayı yazın. <link/> bunları HTML sayfanıza aktarmak CSS etiketini yazın
17. Şu andan itibaren, bu yazı tipine font-familystillerinizdeki adıyla bakın

Bu kadar. Çünkü aynı problemi yaşadım ve üstteki çözüm benim için işe yaramadı.

Diğer cevaplar yanlış değil, ama bunu en hızlı yol olarak buldum.

1. Zip dosyasını Google fontlarından indirin ve sıkıştırmasını açın.
2. Yazı tipi dosyalarını 3 tek seferde http://www.fontsquirrel.com/tools/webfont-generator adresine yükleyin.
3. Sonuçları indirin.

Sonuçlar tüm yazı tipi biçimlerini içerir: woff, svg, ttf, eot .

VE bir avantaj olarak onlar da sizin için css dosyası oluşturmak!

3 adım:

1. Özel yazı tipinizi Goole Fonts'a indirin ve .css dosyasını yükleyin. Ex: http://fonts.googleapis.com/css?family=Open+Sans:400italic.600italic,400,600,300 dosyasını indirin ve example.css olarak kaydedin
2. İndirdiğiniz dosyayı açın ( example.css ). Şimdi tüm font yüzü dosyasını indirmeli ve yazı tiplerine kaydetmelisiniz dizinine .
3. Düzenleme example.css : En .css indirmek için tüm Font-face dosyasını değiştirmek

Ör:

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://fonts.gstatic.com/s/opensans/v14/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}

Src'ye bakınız: -> url. Http://fonts.gstatic.com/s/opensans/v14/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2'yi indirin ve yazı tipi dizinine kaydedin . Bundan sonra URL'yi indirdiğiniz tüm dosyaya değiştirin. Şimdi şöyle görünecek

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(fonts/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}

** .css dosyası içeren tüm yazı tiplerini indirin Umarım size yardımcı olur

Paket bağımlılıklarınızı açıkça belirtmek veya indirmeyi otomatikleştirmek istiyorsanız, google yazı tiplerini almak ve yerel olarak sunmak için bir düğüm paketi ekleyebilirsiniz.

NPM - Google Font Yükle ler

Yazı tipleri projesi Açık Kaynak yazı tipleri için NPM paketleri oluşturur:

Her paket, açık kaynaklı bir yazı tipi barındırmak için gerekli tüm fons ve css ile birlikte gönderilir.
Tüm Google Yazı Tipleri ve küçük ama büyüyen diğer açık kaynak yazı tipleri listesi eklendi.

Sadece UÖM'sini arama için gibi mevcut fontları gözatmak için yazı tipi-roboto veya yazı biçimi açık-sans ve bunun gibi yükleyin:typeface-<typefacename>

$ npm install typeface-roboto    --save 
$ npm install typeface-open-sans --save 
$ npm install material-icons     --save 

NPM - Google Yazı İndir- ers

Daha genel kullanım durumu için, önce paketi edinerek ve ardından eklemek istediğiniz yazı tipi adına ve seçeneklere işaret ederek yazı tiplerini iki adımda teslim edecek birkaç npm paketi vardır.

İşte bazı seçenekler:

• Google Fonts Webpack Eklentisi
• Çevrimdışı Google Yazı Tipleri
• Google Yazı Tipleri
• Google Yazı Tiplerini Edinin

İleri Okumalar :

• Malzeme simgelerini çevrimdışı nasıl barındırabilirim?
• Electron uygulamasında çevrimdışı Malzeme simgelerini ve Roboto yazı tipini kullanma

Aslında yazı tipini projenize dahil ediyorsunuz.

@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: normal;
src: url('path/to/OpenSans.eot');
src: local('Open Sans'), local('OpenSans'), url('path/to/OpenSans.ttf') format('truetype');

Google Fonts'u kullanırken iş akışınız 3 adıma ayrılır: "Seç", "Özelleştir", "Yerleştir". Yakından bakarsanız, "Kullan" sayfasının sağ tarafında, şu anda koleksiyonunuzda bulunan yazı tipini indirmenize olanak tanıyan küçük bir ok vardır.

Bundan sonra ve yazı tipi sisteminize yüklendikten sonra, font-familyCSS yönergesini kullanarak diğer normal yazı tipleri gibi kullanmanız yeterlidir.

Bu işlemi otomatikleştiren aşağıdaki python kodunu üretmek için duydb'nin cevabını takip ettim .

import requests

with open("example.css", "r") as f:
    text = f.read()
    urls = re.findall(r'(https?://[^\)]+)', text)

for url in urls:
    filename = url.split("/")[-1]
    r = requests.get(url)
    with open("./fonts/" + filename, "wb") as f: 
        f.write(r.content)
    text = text.replace(url, "/fonts/" + filename)

with open("example.css", "w") as f:
        f.write(text)

Umarım bu kopyala-yapıştır ölümüne yardımcı olur.

Yazı tipini indirmeniz ve yerel olarak başvurmanız gerekir.

Gönderdiğiniz CSSbağlantıdan indirin , ardından tüm WOFFdosyaları indirin ve (gerekirse) bunları dönüştürün TTF.

Ardından CSS, yazı tiplerini yerel olarak eklemek için gönderdiğiniz bağlantıdan değiştirin .

itibaren

url(http://themes.googleusercontent.com/static/fonts/opensans/v6/
DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff)

için

url(/path/to/font/font.woff)

İşte bu kadar! Yapmanız gereken başka şeyler de olabilir, ancak yukarıdaki temel bilgiler. Bu makale biraz daha iyi açıklıyor.

sadece yazı tipini indirin ve bir klasöre çıkarın. ardından bu yazı tipini bağlayın. Aşağıdaki kod benim için düzgün çalıştı.

body { 
  color: #000; 
  font-family:'Open Sans';
  src:url(../../font/Open_Sans/OpenSans-Light.ttf); 
}