Incorpora il carattere Ubuntu in qualsiasi pagina web

Risposte:

25

Esistono 2 metodi con i quali puoi incorporare il carattere Ubuntu nel tuo sito Web: utilizzare Google Font Directory (preferito) o utilizzare la @font-facedichiarazione CSS e convertire manualmente i caratteri.

Utilizzo di Google Webfonts

Ora puoi utilizzare il carattere Ubuntu come carattere web di Google. Ciò renderà il processo molto più semplice. Gran parte del contenuto di questa parte della risposta proviene dalla risposta di Sladen .

Perché utilizzare l'API di Google Font è il metodo preferito?

L'utilizzo dell'API Font di Google è un suggerimento eccellente in quanto consente ai font web di funzionare automaticamente su tutti i browser moderni senza doversi preoccupare dei dettagli. L'uso dell'API dei caratteri significa che i visitatori vedranno sempre automaticamente l' ultima versione del carattere tipografico.

Come posso utilizzare l'API di Google Font?

Dal 21 dicembre 2010 la famiglia di caratteri Ubuntu è ora inclusa e distribuibile dall'API Google Font, visitare:

Puoi leggere il post di Google Web Font relativo alle notizie, quindi:

  1. Apri la Directory dei font di Google: pagina " Ubuntu - Usa questo font "

  2. Seleziona la combinazione di pesi e stili tra Regular, Corsivo, Grassetto e Grassetto corsivo necessari per la tua pagina web.

    testo alternativo

  3. Se il valore predefinito non è corretto, seleziona la combinazione lingua / script di cui hai bisogno: un sito web russo con esempi in inglese potrebbe usare "cirillico, latino".

    testo alternativo

  4. Aggiungi il <link>tag specificato tra <head> ... </head>nella tua pagina HTML o nei modelli e aggiungi il codice CSS appropriato tra i <style> ... </style>tag nel tuo <head>.

    Ad esempio, se si stesse creando il sito Web ibrido russo / inglese e si volesse utilizzare il carattere come predefinito per tutto il testo, è possibile aggiungere il seguente codice tra i <head>tag:

    <link href='http://fonts.googleapis.com/css?family=Ubuntu&subset=cyrillic,latin' rel='stylesheet' type='text/css' />
<style type="text/css" >
    body {
        font-family : 'Ubuntu', sans-serif;
    }
</style>

Note :

"Latino" è la sceneggiatura in cui sono scritte l'inglese e molte altre lingue europee e africane.

"Subsetting" ottimizza i file dei caratteri inviando solo caratteri per determinate lingue, i caratteri sono di circa 44 kB ciascuno. La cifra di 168 kB mostrata al momento è per tutti i 1.200+ glifi come download di un singolo font Web e la maggior parte non è necessaria per un singolo sito Web.

I file dei caratteri di Ubuntu vengono automaticamente convertiti nel formato corretto per diversi browser; a seconda della marca e la versione del formato richiesto è WOFF, EOT, SVGo TTF. La giusta combinazione di CSS è specifica per ogni richiesta di pagina e risolve magicamente questo difficile problema.

Utilizzando @ font-face

È possibile incorporare i caratteri Ubuntu convertendoli in caratteri WOFF . È quindi possibile incorporarli utilizzando la dichiarazione CSS @ font-face. I caratteri (file .ttf) sono disponibili in /usr/share/fonts/truetype/ubuntu-font-family.

Ad esempio, per utilizzare il carattere Ubuntu Regular, convertito in un file WOFF, Ubuntu-R.woff, utilizzare questo codice CSS:

@font-face
{
    font-family : "Ubuntu-R";
    src: url('Ubuntu-R.woff');
}

Allo stesso modo per Ubuntu Bold:

 @font-face
{
    font-family : "Ubuntu";
    src: url('Ubuntu-B.woff');
    font-weight : bold;
}

Ubuntu corsivo:

@font-face 
{
    font-family : "Ubuntu";
    src: url('Ubuntu-I.woff');
    font-style : italic;
}

Ubuntu Bold Italic:

@font-face
{
    font-family : "Ubuntu";
    src: url('Ubuntu-BI.woff');
    font-weight : bold;
    font-style : italic;
}

Questo è supportato da tutti i browser recenti .

considerazioni

Ricorda che alcuni utenti configurano il proprio browser per utilizzare un set specifico di caratteri e potrebbero essere infastiditi se si utilizzano caratteri personalizzati. Inoltre, leggi la Licenza dei caratteri Ubuntu per i termini esatti su come il carattere può essere distribuito.

— dv3500ea
fonte
@ DKuntz2 - è davvero meglio; Ora ho cambiato la mia risposta.
— dv3500ea,
Non capivo la necessità di copiare la risposta di Sladen. Perché non modificarlo?
— papukaija,
Ho risposto a questa domanda molto tempo prima di Sladen, delineando il metodo @ font-face. Questo era prima che il carattere fosse aggiunto all'API Font di Google (che è un metodo migliore). Ho aggiunto solo una breve nota all'inizio della mia risposta e Sladen ha risposto in modo molto più completo e ha avuto una risposta migliore per l'utilizzo del metodo google.
— dv3500ea,
1
Tuttavia, in questo momento la mia risposta è stata accettata e altamente votata e il risultato è stato che le persone potrebbero pensare che dovrebbero usare il metodo @ font-face che è meno preferibile. sladen mi ha contattato via email al riguardo e ho accettato di cambiare la mia risposta, dando l'attribuzione come richiesto dalla licenza Creative Commons di questo sito.
— dv3500ea,
10

L'utilizzo dell'API Font di Google è un suggerimento eccellente in quanto consente ai font web di funzionare automaticamente su tutti i browser moderni senza doversi preoccupare dei dettagli. L'uso dell'API dei caratteri significa che i visitatori vedranno sempre automaticamente l' ultima versione del carattere tipografico.

Dal 21 dicembre 2010 la famiglia di caratteri Ubuntu è ora inclusa e distribuibile dall'API Google Font, visitare:

Puoi leggere il post di Google Web Font relativo alle notizie, quindi:

  1. Apri la Directory dei font di Google: pagina " Ubuntu - Usa questo font "
  2. Seleziona la combinazione di pesi e stili tra Regular, Corsivo, Grassetto e Grassetto corsivo necessari per la tua pagina web.
  3. Se il valore predefinito non è corretto, seleziona la combinazione lingua / script di cui hai bisogno: un sito web russo con esempi in inglese potrebbe usare "cirillico, latino".
  4. Copia e incolla le due linee di CSS nelle sezioni <head> ... </head>e <style>...</style>della tua pagina HTML o dei tuoi template.

Appunti:

"Latino" è la sceneggiatura in cui sono scritte l'inglese e molte altre lingue europee e africane.

"Subsetting" ottimizza i file dei caratteri inviando solo caratteri per determinate lingue, i caratteri sono circa 44 kB ciascuno. La cifra di 168 kB mostrata al momento è per tutti i 1.200+ glifi come download di un singolo font Web e la maggior parte non è necessaria per un singolo sito Web.

I file dei caratteri di Ubuntu vengono automaticamente convertiti nel formato corretto per diversi browser; a seconda della marca e la versione del formato richiesto è WOFF, EOT, SVGo TTF. La giusta combinazione di CSS è specifica per ogni richiesta di pagina e risolve magicamente questo difficile problema.

— Sladen
fonte
8

Il rendering dei caratteri sul lato server (forse un migliore "rendering dinamico dei caratteri") è stato un problema interessante per molto tempo.

Tecnicamente, sembra logico che affinché una macchina mostri un font specifico, dovrebbe già essere installata localmente.

D'altra parte, il web design perde molto dovendo attenersi ai "font web" di base / noti.

CSS2.1 ha apportato alcuni miglioramenti utilizzando la dichiarazione della regola @ font-face .
Non è ancora diventato uno standard, ma alla fine lo farà con CSS3.

Oltre a ciò, ci sono stati alcuni metodi alternativi, come:

Spero che i link forniti ti diano un'idea migliore di cosa si può fare ;-)

— Pavlos G.
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.