Usi caratteri personalizzati usando CSS?


175

Ho visto alcuni nuovi siti Web che utilizzano font personalizzati sui loro siti (diversi dai normali Arial, Tahoma, ecc.).

E supportano una buona quantità di browser.

Come si fa a farlo? Pur impedendo alle persone di accedere gratuitamente al download del carattere, se possibile.


sostituzione javascript comecufon
tq

Risposte:


365

Generalmente, puoi usare un carattere personalizzato usando @font-facenel tuo CSS. Ecco un esempio molto semplice:

@font-face {
    font-family: 'YourFontName'; /*a name to be used later*/
    src: url('http://domain.com/fonts/font.ttf'); /*URL to font*/
}

Quindi, banalmente, usare il font su un elemento specifico:

.classname {
    font-family: 'YourFontName';
}

( .classnameè il tuo selettore).

Nota che alcuni formati di caratteri non funzionano su tutti i browser; puoi usare il generatore di fontsquirrel.com per evitare troppi sforzi di conversione.

Puoi trovare un bel set di font web gratuiti forniti da Google Fonts (ha anche @font-faceregole CSS generate automaticamente , quindi non devi scrivere il tuo).

impedendo inoltre alle persone di accedere gratuitamente al download del carattere, se possibile

No, non è possibile modellare il testo con un carattere personalizzato incorporato tramite CSS, impedendo alle persone di scaricarlo. Devi usare immagini, Flash o HTML5 Canvas , tutte non molto pratiche.

Spero che abbia aiutato!


Grazie per l'ottima risposta dettagliata. Posso chiedere se quel tipo di approccio funziona anche per i browser più vecchi? Come .. IE8 / 7/6? E comunque, tutti i caratteri visualizzati su Google Webfonts sono gratuiti per uso commerciale?
Radicate il

1
@Don @font-facefunziona con tutti i browser ragionevolmente nuovi, ma devi avere i formati giusti; ecco perché ho raccomandato di usare fontsquirrel.com per automatizzare il processo di conversione e generazione di regole. E sì, Google Webfonts è gratuito per uso commerciale ( piccolo link per maggiori informazioni ).
Chris,

@ Chris, Omettere il font-style:e font-weight:nella tua @font-facedichiarazione viola eventuali standard?
Pacerier

1
Per farlo funzionare ho dovuto aggiungere format('truetype')tra l'URL di origine e il ;.
Calcolatrice

Ciao Chris Sai come usare questo carattere? fontsmarket.com/font-download/gothic-821-condensed-bt
Billal Begueradj

30

Per assicurarti che il tuo carattere sia compatibile con più browser, assicurati di usare questa sintassi:

@font-face {
    font-family: 'Comfortaa Regular';
    src: url('Comfortaa.eot');
    src: local('Comfortaa Regular'), 
         local('Comfortaa'), 
         url('Comfortaa.ttf') format('truetype'),
         url('Comfortaa.svg#font') format('svg'); 
}

Tratto da qui .


25

Devi scaricare il file del carattere e caricarlo nel tuo CSS.

Fe sto usando il carattere Yanone Kaffeesatz nella mia applicazione Web.

Lo carico e lo uso tramite

@font-face {
    font-family: "Yanone Kaffeesatz";
    src: url("../fonts/YanoneKaffeesatz-Regular.ttf");
}

nel mio foglio di stile.


8

Oggi ci sono quattro formati di container di caratteri in uso sul web: EOT, TTF, WOFF,eWOFF2.

Sfortunatamente, nonostante l'ampia gamma di scelte, non esiste un unico formato universale che funzioni su tutti i browser vecchi e nuovi:

  • EOT è solo IE,
  • TTF ha un supporto IE parziale,
  • WOFF gode del più ampio supporto ma non è disponibile in alcuni browser meno recenti
  • Il supporto di WOFF 2.0 è un work in progress per molti browser.

Se desideri che la tua app Web abbia lo stesso carattere su tutti i browser, potresti voler fornire tutti e 4 i tipi di carattere nel CSS

 @font-face {
      font-family: 'besom'; !important
      src: url('fonts/besom/besom.eot');
      src: url('fonts/besom/besom.eot?#iefix') format('embedded-opentype'),
           url('fonts/besom/besom.woff2') format('woff2'),
           url('fonts/besom/besom.woff') format('woff'),
           url('fonts/besom/besom.ttf') format('truetype'),
           url('fonts/besom/besom.svg#besom_2regular') format('svg');
      font-weight: normal;
      font-style: normal;
  }

Ciao Hitesh. Posso chiedere a che serve #iefix? e questa parte font-family: 'besom'; !important, !importantè al di fuori del ;?
Jonjie,


4

c'è anche uno strumento interessante chiamato CUFON . C'è una dimostrazione di come usarlo in questo blog È davvero semplice e interessante. Inoltre, non consente alle persone di ctrl + c / ctrl + v il contenuto generato.


1

Sto lavorando su Win 8, utilizzare questo codice. Funziona con IE e FF, Opera, ecc. Quello che ho capito sono: woff font è leggero e comune sui font di Google.

Vai qui per convertire il tuo carattere ttf in woff prima.

@font-face
{
    font-family:'Open Sans';
    src:url('OpenSans-Regular.woff');
}

0

Prima di tutto, non puoi impedire alle persone di scaricare caratteri, tranne se è tuo e di solito ci vogliono mesi. E non ha senso impedire alle persone di usare i caratteri. Molti tipi di carattere che vedi sui siti Web possono essere trovati su piattaforme gratuite come quella che ho citato di seguito.

Ma se vuoi implementare un font nel tuo sito web leggi questo: Esiste un modo abbastanza semplice e gratuito per implementare i font nel tuo sito web. Consiglierei i caratteri di Google perché è gratuito e facile da usare. Ad esempio, userò il carattere Bangers di Google. ( Https://fonts.google.com/specimen/Bangers?query=bangers&sidebar.open&selection.family=Bangers ) Ecco come sarebbe: HTML

<head>
<link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet">
</head>

CSS

body {
font-family: 'Bangers', cursive;
}
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.