carattere incorporare nel sito
https://stackoverflow.com/questions/1382886
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Ive googled un sacco cercando di capire come incorporare i font su una pagina web. Se ho capito bene si dovrebbe caricare i font alla tua pagina web in formato .ttf e .eot. e l'uso @ font-face in un foglio di stile.
Ho messo il Kingthings_Italique.eot e Kingthings_Italique.ttf nella radice della mia pagina web.
Createt un foglio di stile come questo.
.MyStyle
{
/* For IE */
@font-face
{
font-family: 'Kingthings Italique';
src: url('Kingthings_Italique.eot');
}
/* For Other Browsers */
@font-face
{
font-family: 'Kingthings Italique';
src: local('Kingthings Italique Regular'),
local('KingthingsItalique-Regular'),
url('Kingthings_Italique.ttf') format('truetype');
}
}
In primo luogo mi riferisco ad esso come questo
<head runat="server">
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
E la provo ad usare in questo modo
<asp:Label ID="lbl" runat="server" Font-Bold="True"
Font-Size="30pt" Text="TEST123" CssClass="MyStyle"></asp:Label>
Ma non importa se io uso IE8 o chrome2 il depliant di carattere è cambiato.
Se ho capito http://randsco.com/?p=680&more=1&c=1 corretto dovrebbe essere possibile
Se apro la fonte in IE8 dovrei quindi essere in grado di vedere il nome del font? perché se cerco re attraverso il codice IE8 non trovo nulla
Soluzione
Affinché la funzione di carattere incorporato per lavorare (nei browser che lo sostengono) hai anche avuto modo di applicare il nuovo font-family ad un selettore stile.
Per esempio
h1 {
@font-face {
font-family: CustomFont;
src: url('CustomFont.ttf');
}
}
non farà il trucco, anche se sarà davvero caricare un tipo di carattere (se si tratta di un URL valido) - perché tutto quello che abbiamo fatto è caricare il tipo di carattere. Abbiamo ancora bisogno di applicare in realtà, così
@font-face {
font-family: CustomFont;
src: url('CustomFont.ttf');
}
h1 {
font-family: CustomFont;
}
sia carica il carattere personalizzato e lo applica a vostra selettore CSS (in questo esempio, H1).
È quasi sicuramente voglia di leggere un tutorial su @ font-face (Krule ha già suggerito un buon uno sopra con link a gratis caratteri che possono essere utilizzati con esso.) Idem per tutti gli avvertimenti di cui sopra circa la degenerazione aggraziato, come questo non è ancora una caratteristica universalmente supportato.
Altri suggerimenti
Questo non è davvero qualcosa che si può, o dovrebbe fare. La maggior parte del web si è stabilito su alcuni caratteri di base (serif, sans-serif, ecc) ed è quindi fino al browser per decidere. È possibile specificare più tipi di carattere e hanno il downgrade del browser, se non è disponibile:
font-family: Kingthings Italique, sans-serif
Questa è probabilmente la migliore strategia, se le persone hanno il tipo di carattere verrà visualizzato, altrimenti diventerà un tipo di carattere generico.
Sebbene l'utilizzo di @ font-face non è ancora raccomandato a causa della mancanza di un ampio sostegno, c'è un modo per utilizzare caratteri personalizzati nei browser moderni (la maggior parte di loro). Tuttavia non dimenticate di fornire una soluzione di backup per la degradazione di grazia nel browser più vecchi.
In ogni caso, si dovrebbe verificare questo tutorial per ulteriori dettagli.
Per quanto ne so, font embedding utilizzando CSS puro non è realmente supportato dalla maggior parte dei browser (ancora).
Altre soluzioni esiste, però. Se non ti dispiace utilizzando JavaScript, controllare Cufon , che utilizza SVG / VML a rendere qualsiasi tipo di carattere nella maggior parte dei browser web usato oggi (anche IE6).
l'incorporamento dei caratteri usando i CSS non dovrebbe funzionare nei moderni browser web. Più precisamente, l'incorporamento dei caratteri usando i CSS era parte di CSS2 ed è stata sostenuta da alcuni browser, ma ritirato a CSS 2.1 (e in realtà anche rimosso dalla specifica corrente CSS2).
aspettarsi un ritorno di supporto dei caratteri con CSS3 quando i browser iniziano sostegno che. Firefox 3.5, Opera 10 e Safari sono tenuti a sostenere stile CSS3 font-embedding utilizzando font TTF, Chrome non dispongono di supporto di Safari per carattere CSS3 embedding per qualche motivo.
Il tuo problema nel rendere il vostro font su IE8 potrebbe essere legato al fatto che la seconda dichiarazione font-face definisce lo stesso font-family come il primo - e, quindi, prevale su di esso - ma non dichiara alcun carattere EOT che IE può utilizzare .
Vi suggerisco di utilizzare una definizione unica font-face come;
@font-face
{
font-family: 'Kingthings Italique';
src: local('Kingthings Italique Regular'),
local('KingthingsItalique-Regular'),
url('Kingthings_Italique.eot'),
url('Kingthings_Italique.ttf') format('truetype');
}
Poi IE può provare a utilizzare il tipo di carattere EOT prima. Altri browser (Chrome, ma non a quanto pare) cercherà di utilizzare l'EOT, poi ripiegare al rendering TTF. Questo ovviamente presuppone che IE in grado di gestire la definizione "fonti alternative", che io non sono sicuro che lo fa - @ font-face documentazione in MSDN non fa un riferimento a questo.
Prima di tutto, cercare di utilizzare percorsi assoluti:
url('/Kingthings_Italique.ttf')
<link href="/StyleSheet.css" rel="stylesheet" type="text/css" />
Penso che si dovrebbe avere un solo @ dichiarazione font-face con molte fonti per un font-family. Sembra IE non piace la tua dichiarazione. Il codice da articolo citato ( http://randsco.com/index.php/ 2009/07/04 / cross_browser_font_embedding ):
@font-face {
font-family: " your FontName ";
src: url( /location/of/font/FontFileName.eot ); /* IE */
src: local(" real FontName "), url( /location/of/font/FontFileName.ttf ) format("truetype"); /* non-IE */
}
/* THEN use like you would any other font */
.yourFontName {
font-family:" your FontName ", verdana, helvetica, sans-serif;
}
La prima fonte dovrebbe essere per il file EOT. La seconda fonte dovrebbe essere per il file TTF e iniziare con nome di carattere locale. Si tratta di una sorta di hack. Il secondo attributo di origine sembra non valido per IE in modo da questo browser utilizzare il primo. Per gli altri browser sono entrambi validi, tuttavia l'ultima viene utilizzato solo.
Per la conversione di file TTF per EOT Ho usato questo piccolo programma: http://code.google.com/p/ttf2eot/
Il metodo dovrebbe essere supportato da seguenti browser:
- Firefox 3.6 +
- Internet Explorer 4 +
- Opera 10.00 +
- Chrome 4.0 +
- Safari 3.1 +
Ho fatto qualche prova ed hanno lavorato per me. Il Chrome 2 è probabilmente troppo vecchio.
Sarà necessario blocchi per supportare i caratteri incorporati in entrambi i browser IE e non-IE.
Il blocco IE dovrà venire secondo ed essere contenuta all'interno di un selettore commento IE.
Ad esempio:
<style type="text/css">
@font-face
{
font-family: 'myFont';
src: url('/location/of/myFont.ttf');
}
</style>
Questo funziona per tutti i browser moderni, ad eccezione di IE (Firefox, Safari, Chrome, ecc ...) Ora per ottenere IE comportarsi è necessario il seguente:
<!--[if IE]>
<style type="text/css">
@font-face
{
font-family: 'myFont';
src: url('/location/of/myFont.eot');
}
</style>
<![endif]-->
Il commento istruzione if viene letto solo da IE dal IE 5 e su. Questo è grande per dare IE istruzioni speciali. Per gli altri browser è solo un po 'commentata del testo che non viene eseguito il rendering.
Se non si dispone di un formato .eot del vostro font TTF allora si può andare al seguente url http://www.kirsle.net/wizards/ttf2eot.cgi E 'davvero facile da usare e genera il carattere .eot per voi in pochi secondi.
1, se ti piace la mia risposta. Commento se si pensa che ho bisogno di migliorare qualcosa:)
riconosco questa domanda è piuttosto vecchio, ma ora c'è una grande API di carattere da parte di Google che si può <link> a: https://developers.google.com/webfonts/
