Risposte:
Sì, puoi utilizzare la funzione CSS denominata @ font-face. È stato ufficialmente approvato solo in CSS3, ma è stato proposto e implementato in CSS2 ed è stato supportato in IE per un periodo piuttosto lungo.
Lo dichiarate nel CSS in questo modo:
@font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); }
@font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf');}Quindi, puoi semplicemente fare riferimento come gli altri caratteri standard:
h3 { font-family: Delicious, sans-serif; }Quindi, in questo caso,
<html>
<head>
<style>
@font-face { font-family: JuneBug; src: url('JUNEBUG.TTF'); }
h1 {
font-family: JuneBug
}
</style>
</head>
<body>
<h1>Hey, June</h1>
</body>
</html>E devi solo inserire JUNEBUG.TFF nella stessa posizione del file html.
Ho scaricato il carattere dal sito Web dafont.com :
urlè relativo alla posizione del file css .
Per il miglior supporto possibile del browser, il tuo codice CSS dovrebbe apparire così:
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
body {
font-family: 'MyWebFont', Fallback, sans-serif;
}Per ulteriori informazioni, vedere l'articolo Utilizzo di @ font-face su CSS-tricks.com .
Puoi utilizzare @ font-face nella maggior parte dei browser moderni.
Ecco alcuni articoli su come funziona:
Ecco una buona sintassi per aggiungere il carattere alla tua app:
Ecco un paio di posizioni per convertire i caratteri da usare con @ font-face:
Inoltre cufon funzionerà se non si desidera utilizzare font-face e ha una buona documentazione sul sito Web:
Prova questo
@font-face {
src: url(fonts/Market_vilis.ttf) format("truetype");
}
div.FontMarket {
font-family: Market Deco;
} <div class="FontMarket">KhonKaen Market</div>vilis.org
Se stai usando un foglio di stile esterno, il codice potrebbe assomigliare a questo:
@font-face { font-family: Junebug; src: url('Junebug.ttf'); }
.junebug { font-family: Junebug; font-size: 4.2em; }E dovrebbe essere salvato in un file .css separato (ad esempio styles.css). Se il file .css si trova in una posizione separata dal codice della pagina, il file del carattere effettivo dovrebbe avere lo stesso percorso del file .css, NON del file della pagina Web .html o .php. Quindi la pagina web ha bisogno di qualcosa come:
<link rel="stylesheet" href="css/styles.css">nella sezione <head> della tua pagina html. In questo esempio, il file dei caratteri dovrebbe trovarsi nella cartella css insieme al foglio di stile. Successivamente, aggiungi semplicemente class = "junebug" all'interno di qualsiasi tag nel tuo html per utilizzare il font Junebug in quell'elemento.
Se stai inserendo i CSS nella pagina Web effettiva, aggiungi il tag di stile nella testa dell'html come:
<style>
@font-face { font-family: Junebug; src: url('Junebug.ttf'); }
</style>E lo stile dell'elemento reale può essere incluso in quello sopra <style>e chiamato per elemento per classe o id, oppure puoi semplicemente dichiarare lo stile in linea con l'elemento. Per elemento intendo <div>, <p>, <h1> o qualsiasi altro elemento all'interno dell'html che deve utilizzare il carattere Junebug. Con entrambe queste opzioni, il file del carattere (Junebug.ttf) dovrebbe trovarsi nello stesso percorso della pagina html. Di queste due opzioni, la migliore pratica sarebbe simile a:
<style>
@font-face { font-family: Junebug; src: url('Junebug.ttf'); }
.junebug { font-family: Junebug; font-size: 4.2em; }
</style>e
<h1 class="junebug">This is Junebug</h1>E il modo meno accettabile sarebbe:
<style>
@font-face { font-family: Junebug; src: url('Junebug.ttf'); }
</style>e
<h1 style="font-family: Junebug;">This is Junebug</h1>Il motivo per cui non è bene usare gli stili in linea è la migliore pratica impone che gli stili debbano essere tenuti tutti in un posto, quindi la modifica è pratica. Questo è anche il motivo principale per cui consiglio di utilizzare la prima opzione di utilizzo di fogli di stile esterni. Spero che aiuti.
c'è un modo semplice per farlo: nel file html aggiungi:
<link rel="stylesheet" href="fonts/vermin_vibes.ttf" />Nota: inserisci il nome del file .ttf che hai. quindi vai al tuo file css e aggiungi:
h1 {
color: blue;
font-family: vermin vibes;
}Nota: inserisci il nome della famiglia di caratteri del carattere che hai.
Nota: non scrivere il nome della famiglia di caratteri come esempio di nome font.ttf: se il tuo nome di font.ttf è: "vermin_vibes.ttf" la tua famiglia di caratteri sarà: la famiglia di caratteri "vermin vibes" non contiene caratteri speciali come "-, _" ... ecc. può contenere solo spazi.
font-facein CSS invece di richiedere un file ttf.