Usi caratteri personalizzati usando CSS?

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.

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!

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 .

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.

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;
  }

Se non trovi i caratteri che ti piacciono da Google.com/webfonts o fontsquirrel.com puoi sempre creare il tuo carattere web con un carattere che hai creato.

ecco un simpatico tutorial: crea il tuo kit di caratteri web per la faccia dei caratteri

Anche se non sono sicuro di impedire a qualcuno di scaricare il tuo font.

Spero che questo ti aiuti,

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.

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');
}

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;
}