Incorpora carattere nella pagina web

Ive googled molto cercando di capire come incorporare i caratteri su una pagina web. Come ho capito, dovresti caricare i caratteri sulla tua pagina web nei formati .ttf e .eot. e l'uso @ font-face in un foglio di stile.Incorpora carattere nella pagina web

Ho inserito il Kingthings_Italique.eot e il Kingthings_Italique.ttf nella radice della mia pagina web.

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

Prima mi riferisco ad esso come questo

<head runat="server"> 
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />

E l'cerco di 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 correggere dovrebbe essere possibile

Se apro la fonte in IE8 dovrei quindi essere in grado di vedere il nome del font? perché se cerco il re tramite il codice ie8 non trovo nulla

fonte

2009-09-05 CruelIO

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 di 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à, in modo

@font-face { 
    font-family: CustomFont; 
    src: url('CustomFont.ttf'); 
} 

h1 { 
    font-family: CustomFont; 
}

entrambi i carichi il carattere personalizzato e lo applica alla tua selettore CSS (in questo esempio, H1).

Quasi certamente vorrai leggere un tutorial su @ font-face (Krule ne ha già suggerito uno migliore in precedenza con collegamenti a font gratuiti che possono essere utilizzati con esso.) Idem per tutti gli avvertimenti sopra sulla degenerazione elegante , in quanto questa non è ancora una funzione supportata universalmente.

fonte

2009-09-23 00:13:04

Come utilizzare font arabo usando sopra ? –

AFAIK, l'incorporamento di caratteri utilizzando puro CSS non è realmente supportato dalla maggior parte dei browser (ancora).

Tuttavia esistono altre soluzioni. Se non ti dispiace usare javascript, controlla cufon, che usa SVG/VML per eseguire il rendering di qualsiasi font nella maggior parte dei browser Web oggi utilizzati (anche IE6).

fonte

2009-09-05 09:42:10

Questo non è davvero qualcosa che puoi o devi fare. La maggior parte del web si è basata su alcuni tipi di carattere di base (serif, sans-serif, ecc.) E spetta al browser 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.

fonte

2009-09-05 09:42:57 AAA

L'incorporamento di caratteri tramite CSS non dovrebbe funzionare nei browser Web moderni. Più precisamente, l'incorporamento dei font tramite CSS faceva parte dei CSS2 ed era supportato da alcuni browser, ma era stato ritirato nei CSS2.1 (e in realtà anche rimosso dalle specifiche correnti dei CSS2).

Aspettatevi un ritorno del supporto per font con CSS3 quando i browser iniziano a supportarlo. Firefox 3.5, Opera 10 e Safari supporteranno l'incorporamento di font in stile CSS3 usando i font TTF, Chrome non supporta il supporto di Safari per l'incorporamento di font CSS3 per qualche motivo.

Il tuo problema nel rendering del tuo font su IE8 può essere correlato al fatto che la seconda dichiarazione font-face definisce la stessa famiglia di font della prima - e quindi la sostituisce - ma non dichiara alcun carattere di eot che IE può uso.

Suggerisco di utilizzare una singola definizione di 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'); 
}

Quindi IE può provare a utilizzare prima il carattere di eot. Altri browser (ma non Chrome apparentemente) proveranno a usare l'eot, quindi torneranno al rendering ttf.Questo ovviamente presuppone che IE sia in grado di gestire la definizione di "fonti alternative", che non sono sicuro che lo faccia: lo @font-face documentation in MSDN non fa riferimento a questo.

fonte

2009-09-05 10:23:55 Guss

Anche se l'utilizzo di @ font-face non è ancora consigliato a causa della mancanza di supporto diffuso, esiste un modo per utilizzare i caratteri personalizzati nei browser moderni (molti di essi). Tuttavia, non dimenticare di fornire una soluzione di backup per un degrado aggraziato nei browser più vecchi.

In ogni caso, è necessario controllare this tutorial per ulteriori dettagli.

fonte

2009-09-05 13:23:55 Krule

Prima di tutto, tenta di utilizzare i percorsi assoluti:

url('/Kingthings_Italique.ttf') 

<link href="/StyleSheet.css" rel="stylesheet" type="text/css" />

fonte

2009-09-05 16:30:04

Penso che dovresti avere una sola dichiarazione @ font-face con molte fonti per una famiglia di font. Sembra che a IE non piaccia 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 il nome del carattere locale. È una specie di hack. Il secondo attributo source sembra non valido per IE, quindi questo browser utilizza il primo. Per altri browser sono entrambi validi, tuttavia viene utilizzato solo l'ultimo.

per convertire i file TTF per EOT Ho usato questo piccolo programma: http://code.google.com/p/ttf2eot/

Il metodo dovrebbe essere sostenuto da seguenti browser:

Firefox 3.6 +
Internet Explorer 4 +
Opera 10.00 +
Chrome 4.0 +
Safari 3.1 +

Ho fatto qualche test e ha funzionato per me. Il Chrome 2 è probabilmente troppo vecchio.

fonte

2010-02-12 21:12:05 Michas

Questo non funziona. Si prega di vedere la mia risposta per un modo più accurato di incorporare i caratteri sia per IE che per i browser non-ie allo stesso tempo. – Chev

È necessario bloccare i blocchi per supportare i caratteri incorporati nei browser IE e non-IE.

Il blocco IE dovrà venire in secondo luogo ed essere contenuto all'interno di un commento del selettore 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 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]-->

L'istruzione if if viene letta solo da IE a partire da IE 5 e successive. Questo è ottimo per dare istruzioni speciali per IE. Per gli altri browser è solo un testo commentato che non viene visualizzato.

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 :)

fonte

2010-11-17 17:33:50 Chev

riconosco questa domanda è piuttosto vecchio, ma ora c'è un grande API di carattere da parte di Google che si può <link> a: https://developers.google.com/webfonts/

fonte

2012-07-29 05:42:20

Incorpora carattere nella pagina web

risposta

Problemi correlati