Am un șablon și de a o referință la un font Google astfel:
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300' rel='stylesheet' type='text/css'>
Cum pot descărca și setați-l pentru a utiliza în paginile mele care rulează offline tot timpul?
Acesta vă permite să descărcați fiecare font web Google și sugerează cod css pentru punerea în aplicare. Acest instrument, de asemenea, vă permite să descărcați pur și simplu toate formatele de la o dată, fără a hassle.
dorit Vreodată să știți în cazul în care Google gazdele lor fonturile web? Acest serviciu ar putea fi la îndemână dacă doriți să descărcați toate .eot, .woff, .woff2, .svg, .ttf fișiere de font varianta direct de la google (în mod normal dvs. de Utilizator-Agent-ar stabili cel mai bun format).
De asemenea, să ia o privire la lor pagina Github.
Du-te la Google Fonturi - http://www.google.com/fonts/ , se adaugă font vă place la colecția dvs., și apăsați butonul de download. Și apoi, trebuie doar să utilizați @fontface pentru a conecta fontul de la pagina dvs. de web. Btw, daca ai deschis link-ul pe care îl utilizați,'ll vedea un exemplu de utilizare a @fontface
http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300
Pentru un exemplu
@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');
}
Doar schimba adresa url la nivel local link-ul de pe fișiere de font, ai'am descarcat.
Puteți face chiar mai ușor.
Doar descărca fișiere, ai'am legat:
http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300
Nume opensans.css sau cam asa ceva.
Apoi schimba doar link-uri in url() pentru a-ți calea către fișierele de fonturi.
Și apoi înlocuiți exemplu șir cu:
<link href='opensans.css' rel='stylesheet' type='text/css'>
Găsit un pas-cu-pas modalitate de a realiza acest lucru (pentru 1 font):
(ca de Sep-9 2013)
- Alege fontul la http://www.google.com/fonts
- Adaugă dorit la colecția dvs. folosind "Adăugați la colecția" buton albastru
- Faceți clic pe "Vezi toate stilurile" butonul de lângă "Eliminați din colectia" buton și asigurați-vă că ați selectat alte stiluri pot, de asemenea, nevoie de un astfel de ca 'bold'...
- Faceți clic pe 'Folosi' tab buton de pe dreapta jos a paginii
- Faceți clic pe butonul descărcare din partea de sus cu o săgeată în jos imaginea
- Faceți clic pe "fișier zip" pe mesaj pop-up care apare
- Faceți clic pe "Aproape" buton de pe pop-up
- Încet derulați pagina până când veți vedea cele 3 tab-uri "Standrd|@import|Javascript"
- Faceți clic pe "@import" fila
- Selectați și copiați url-ul între
'url(' și
')'`- Copiați-l în bara de adrese într-o filă nouă și du-te acolo
- Face "Fișier > Save page as..." și nume "desiredfontname.css" (înlocuiți în mod corespunzător)
- Decomprima fonturi .fișierul zip descărcat (.ttf ar trebui să fie extras)
- Du-te la "http://ttf2woff.com/" și de a converti orice .ttf extras din zip cu .woff
- Edit
desiredfontname.css și înlocuiți url-ul în ea [între
'url(' și')'
] cu valoarea de convertit .woff fișier de pe tine ttf2woff.com; calea scrie ar trebui să fie în funcție de server doc_root- Salvați fișierul și mutați-l în poziția finală și să scrie corespunzătoare
<link/>
CSS tag-ul pentru a importa aceste în pagina HTML- De acum, se referă la acest font de sa
font-family
numele în stiluri
Ca's a. Pentru că am avut aceeași problemă și soluția pe partea de sus nu au de lucru pentru mine.
Alte răspunsuri nu sunt greșite, dar am găsit acest lucru să fie cel mai rapid mod.
Rezultatele conține toate formate de fonturi: woff, svg, ttf, eot.
ȘI ca un bonus vor genera fișierul css pentru tine!
Aruncati o privire la această aplicație la îndemână articolul]1 pentru a explica cum să folosiți fonturi Google offline
În esență, sunteți inclusiv fontul în proiectul dumneavoastră.
@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');
3 pași:
Ex:
@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;
}
Uita-te la src: -> url-ul. Download http://fonts.gstatic.com/s/opensans/v14/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2 și de a salva fonturi director. După aceea, schimbați url-ul pentru toate fișierul descărcat. Acum, acesta va fi arata ca
@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;
}
** Descarcă toate fonturile contin .fișier css Sper că vă va ajuta u
Atunci când se utilizează Fonturi Google, fluxul de lucru este împărțit în 3 etape : "Selectați", "Personaliza", "Încorpora". Dacă te uiți atent, la capătul din dreapta al "de Utilizare" pagină, există o mică săgeată care vă permite să descărcați fontul în prezent în colecția ta.
<img src="https://i.stack.imgur.com/TGU4k.png" lățime="608" />
După aceea, și după ce font este instalat pe sistemul dumneavoastră, trebuie doar să-l folosească ca orice alt regular font folosind font-family` CSS directivă.
Daca'd place să declare în mod explicit pachetul dependențe sau automatiza descărcarea, puteți adăuga un nod pachet pentru a trage în fonturi google și de a servi pe plan local.
De fonturi proiect creează NPM pachete Open Source fonturi :
Fiecare pachet nave cu toate cele necesare fons și css pentru auto-gazdă o sursă deschisă font. Toate Fonturile Google au fost adăugate, precum și un mic, dar în creștere listă de alte fonturi open source.
Doar căutare npm pentru
$ npm install typeface-roboto --save
$ npm install typeface-open-sans --save
$ npm install material-icons --save
Pentru mai generic caz de utilizare, acolo sunt mai multe npm pachete care va oferi fonturi în două etape, prima prin obținerea pachetului, și apoi arătând la nume de font și opțiuni'd dori să includă.
Aici sunt unele dintre opțiunile:
Bibliografie:
Am urmat duydb's răspunsul pentru a produce cod python de mai jos, care automatizează acest proces.
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)
Sper că acest lucru ajută cu niște copy-paste moartea.
Aveți nevoie pentru a descărca fontul și de referință la nivel local.
Descărcați CSS
din link-ul postat de tine, apoi descărca toate WOFF fișierele și (dacă este necesar) de a le converti la
TTF`.
Apoi schimba CSS
din link-ul postat de tine pentru a include fonturi la nivel local.
Din
url(http://themes.googleusercontent.com/static/fonts/opensans/v6/
DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff)
Pentru a
url(/path/to/font/font.woff)
Voila! Ar putea fi ceva mai mult ai nevoie pentru a face, dar cele de mai sus este de bază. Acest articol explică un pic mai bine.
doar descărca fontul și extrage-l într-un folder. apoi că link-ul de font. codul de mai jos lucrat pentru mine în mod corespunzător.
body {
color: #000;
font-family:'Open Sans';
src:url(../../font/Open_Sans/OpenSans-Light.ttf);
}