Incorpora il carattere di Ubuntu su qualsiasi pagina web

15

Considerando licenze come:

Come posso utilizzare la famiglia di font Ubuntu su qualsiasi sito Web senza che l'utente debba installarlo?
Qualche possibilità di utilizzarlo con strumenti come: link

    
posta takeshin 07.12.2010 - 18:52

3 risposte

24

Ci sono 2 metodi con i quali puoi incorporare il carattere di Ubuntu nel tuo sito web - usando la Directory dei font di Google (preferito) o usando la dichiarazione CSS @font-face e convertendo i tuoi font manualmente.

Utilizzo di Google Webfonts

Ora puoi usare il font di Ubuntu come un font web di Google. Questo renderà il processo molto più semplice. La maggior parte del contenuto di questa parte della risposta proviene da risposta di sladen .

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

L'uso dell'API dei font di Google è un eccellente suggerimento in quanto consente ai Webfonts di funzionare automaticamente su tutti i browser moderni senza doversi preoccupare dei dettagli. L'utilizzo dell'API del font significa che i visitatori vedranno sempre automaticamente la versione più recente del carattere tipografico.

Come posso utilizzare l'API dei font di Google?

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

Puoi leggere la pubblicazione dei font Web di Google a proposito le notizie e quindi:

  1. Apri la directory dei tipi di carattere di Google: " Ubuntu - Utilizza questo carattere "pagina
  2. Spunta la combinazione di pesi e stili su Regular, Corsivo, Grassetto e Grassetto-Corsivo di cui hai bisogno per la tua pagina web.

  3. Se l'impostazione predefinita non è corretta, seleziona la combinazione lingua / script di cui hai bisogno: un sito Web russo con esempi in inglese potrebbe utilizzare "Cirillico, latino".

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

    Ad esempio, se stavi creando il sito web ibrido russo / inglese e volevi utilizzare il carattere come predefinito per tutto il testo, potresti aggiungere il seguente codice tra i tuoi tag <head> :

    <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" è lo script in cui sono scritte l'inglese e molte altre lingue europee e africane.

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

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

Utilizzo di @ font-face

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

Ad esempio, per usare il carattere di Ubuntu Regular, convertito in un file WOFF, Ubuntu-R.woff, usa 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;
}

Corsivo di Ubuntu:

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

Corsivo grassetto di Ubuntu:

@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 impostano i propri browser per utilizzare un set specifico di caratteri e potrebbero essere infastiditi se vengono utilizzati caratteri personalizzati. Leggi anche la Licenza dei font di Ubuntu per i termini esatti su come il font può essere distribuito .

    
risposta data dv3500ea 07.12.2010 - 19:56
10

L'uso dell'API dei font di Google è un eccellente suggerimento in quanto consente ai Webfonts di funzionare automaticamente su tutti i browser moderni senza doversi preoccupare dei dettagli. L'utilizzo dell'API del font significa che i visitatori vedranno sempre automaticamente la versione più recente del carattere tipografico.

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

Puoi leggere la pubblicazione dei font Web di Google a proposito le notizie e quindi:

  1. Apri la directory dei caratteri di Google: " Ubuntu - Utilizza questo carattere "pagina
  2. Spunta la combinazione di pesi e stili su Regular, Corsivo, Grassetto e Grassetto-Corsivo di cui hai bisogno per la tua pagina web.
  3. Se l'impostazione predefinita non è corretta, seleziona la combinazione lingua / script di cui hai bisogno: un sito Web russo con esempi in inglese potrebbe utilizzare "Cirillico, latino".
  4. Copia e incolla le due righe di CSS nelle sezioni <head> ... </head> e <style>...</style> della pagina o dei modelli HTML.

Note:

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

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

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

    
risposta data sladen 22.12.2010 - 04:17
8

Il rendering dei font sul lato server (forse con un migliore "rendering dinamico dei font") è stato un problema interessante da un po 'di tempo.

Tecnicamente, sembra logico che, per consentire a una macchina di visualizzare un font specifico, dovrebbe essere già installato localmente.

D'altra parte, il web design perde molto dovendo attenersi ai "caratteri web" di base / ben conosciuti.

I CSS2.1 hanno apportato alcuni miglioramenti utilizzando la dichiarazione @ font-face .
Non è ancora diventato uno standard, ma alla fine sarà con CSS3.

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

Spero che i collegamenti forniti ti forniscano un'idea migliore di ciò che può essere fatto; -)

    
risposta data Pavlos G. 07.12.2010 - 19:30

Leggi altre domande sui tag