Come utilizzare non standard tipi di carattere in un sito web

September 14

Come utilizzare non standard tipi di carattere in un sito web


Cascading Style Sheets, o CSS, è uno strumento che consente agli sviluppatori del sito web o proprietari di applicare stili a qualunque o tutti gli elementi di un sito HTML. CSS3, la nuova versione a partire dal 2010, permette di caricare i file TTF OTF o al server in modo che sia possibile utilizzare i caratteri non standard sul tuo sito web. Questo metodo consente una maggiore scelta di font per personalizzare ulteriormente l'aspetto dei vostri elementi della pagina Web. Anche i visitatori che non hanno il carattere personalizzato installato saranno in grado di vedere sul tuo sito.

istruzione

Carica Font

1 Avviare il programma FTP e digitare il nome utente, la password e le informazioni sul server nei campi appropriati.

2 Pres "Invio" o cliccare sul pulsante "Connect".

3 Passare alla cartella, come ad esempio la cartella di base del tuo sito web, nel riquadro "server remoto" del vostro programma FTP. Si può anche scegliere di creare una nuova cartella per i font, come "http://yourwebsite.com/fonts."

4 Passare alla cartella che contiene il file di carattere sul computer nel riquadro "locale" del vostro programma FTP.

5 Fare doppio clic sul file di font oppure fare clic destro e scegliere "Carica" ​​per caricare il file. Si noti l'URL, che può essere simile a "http://yourwebsite.com/fonts/fontname.ttf" se si utilizza una cartella "Fonts" ed è un font TTF.

Edit CSS

6 Pulsante destro del mouse sulla pagina Web HTML o file CSS esterno nel vostro client FTP e selezionare "Download". Aprire il file con un editor di testo.

7 Aggiungere il seguente blocco CSS prima del </ style> tag nella testa del documento HTML:

@carattere tipografico {

font-family: 'nome del tuo carattere va qui';

src: url ( 'http://yourwebsite.com/fonts/fontname.ttf')

}

Change "http://yourwebsite.com/fonts/fontname.ttf" all'URL effettivo del file font.

Se si utilizza un foglio di stile esterno (ad esempio "style.css"), è sufficiente incollare il blocco del CSS alla fine del documento.

8 Aggiungere quanto segue alla CSS nella tua testa o foglio di stile esterno:

.specialtext {

font-family: 'Nome carattere'

}

Modificare "Nome del font" per il nome effettivo del font. È inoltre possibile modificare "specialtext" a qualsiasi parola descrittiva. Ad esempio, si potrebbe chiamarla "SignatureText" se si sta utilizzando un tipo di carattere corsivo per emulare una firma.

9 Salvare la pagina Web o il file CSS aprendo il menu File e selezionando "Salva".

10 Carica il file sul server host Web facendo doppio clic su di esso nel riquadro locale del client FTP o trascinandolo dalla sua posizione sul computer per il riquadro remoto del programma FTP.

Modifica HTML

11 Scaricare e aprire il file HTML che si desidera modificare, se è diverso dal file che conteneva il CSS.

12 Aprire il file HTML in un editor di testo come Blocco note.

13 Posizionare il testo che si desidera utilizzare il font non standard con tra i tag <p class = "specialtext"> </ p> tag e quindi è simile a questa:

<P class = "specialtext"> Questo testo userà un font non standard. <P>

14 Change "specialtext" se è stato modificato il selettore CSS nel foglio di stile / testa.

15 Salvare e caricare il file HTML.

Consigli e avvertenze

  • Si consiglia di includere diversi caratteri standard nel CSS, come nel seguente esempio dove "standardfont1" e "standardfont2" sono stand-in per i nomi dei font standard di vero e proprio.
  • .specialtext {
  • font-family: 'Font Nome', standardfont1, standardfont2; }
  • È possibile impostare il tipo di font di selettori comuni come "corpo", "div", "p" o "H1" nel CSS, se si desidera che tutti gli elementi della pagina per utilizzare il carattere non standard.
  • È possibile applicare la classe CSS a qualsiasi elemento contenitore tra cui "p", "div" e "arco".

Articoli Correlati