Incrustar fuente en la página web

He buscado mucho en Google para descubrir cómo incrustar las fuentes en una página web. Según tengo entendido, debe cargar las fuentes en su página web en formatos .ttf y .eot. y el uso @ font-face en una hoja de estilo.Incrustar fuente en la página web

He colocado Kingthings_Italique.eot y Kingthings_Italique.ttf en la raíz de mi página web.

Crea una hoja de estilo como esta.

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

En primer lugar me refiero a ella como esto

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

Y el trato de utilizar de esta manera

<asp:Label ID="lbl" runat="server" Font-Bold="True" 
     Font-Size="30pt" Text="TEST123" CssClass="MyStyle"></asp:Label>

Pero no importa si uso IE8 o chrome2 la tampoco cambiar fuente .

Si entiendo http://randsco.com/?p=680&more=1&c=1 corregir debería ser posible

Si abro la fuente en IE8 debería entonces ser capaz de ver el nombre de la fuente? porque si busco rey a través del código ie8 no encuentro nada

Fuente

2009-09-05 CruelIO

Para que la función de fuente incorporado a trabajar (en los navegadores que lo apoyan) también se tiene que aplicar la nueva fuente de la familia a una selector de estilo

Por ejemplo

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

no va a hacer el truco, a pesar de que será hecho cargo una fuente (si es una URL válida) - porque todo lo que hemos hecho es cargar la fuente. Todavía tenemos que aplicar realmente, por lo

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

h1 { 
    font-family: CustomFont; 
}

ambas cargas la fuente personalizada y lo aplica a su selector CSS (en este ejemplo, h1).

Es casi seguro que querrá leer un tutorial sobre @ font-face (Krule ya ha sugerido uno bueno arriba con enlaces a fuentes gratuitas que se pueden usar con él). Ídem a todas las advertencias anteriores sobre degeneración agraciada , ya que esta aún no es una función universalmente compatible.

Fuente

2009-09-23 00:13:04

Cómo utilizar la fuente árabe usando anterior ? –

AFAIK, la incrustación de fuentes usando CSS puro no es realmente compatible con la mayoría de los navegadores (aún).

Existen otras soluciones, sin embargo. Si no le importa usar javascript, consulte cufon, que utiliza SVG/VML para representar cualquier fuente en la mayoría de los navegadores web que se usan hoy en día (incluso IE6).

Fuente

2009-09-05 09:42:10

Esto no es realmente algo que pueda o deba hacer. La mayoría de la web se ha adaptado a algunas fuentes básicas (serif, sans-serif, etc.) y depende del navegador decidir. Puede especificar múltiples fuentes y tienen la rebaja del navegador si no está disponible:

font-family: Kingthings Italique, sans-serif

Esta es probablemente la mejor estrategia, si la gente tiene la fuente se mostrará, de lo contrario se convertirá en una fuente genérica.

Fuente

2009-09-05 09:42:57 AAA

Se supone que la inserción de fuentes con CSS no funciona en los navegadores web modernos. Más precisamente, la incrustación de fuentes usando CSS era parte de CSS2 y era compatible con algunos navegadores, pero se retractó en CSS2.1 (y en realidad también se eliminó de la especificación actual de CSS2).

Espere un regreso del soporte de fuentes con CSS3 cuando los navegadores comiencen a admitir eso. Se espera que Firefox 3.5, Opera 10 y Safari admitan la incrustación de fuentes de estilo CSS3 utilizando fuentes TTF. Chrome no cuenta con la compatibilidad de Safari con la incrustación de fuentes CSS3 por algún motivo.

Su problema al renderizar su fuente en IE8 puede estar relacionado con el hecho de que la segunda declaración font-face define la misma familia de fuentes que la primera y, por lo tanto, la invalida, pero no declara ninguna fuente que IE pueda utilizar.

Le sugiero que use una sola definición de tipo de fuente como;

@font-face 
{ 
    font-family: 'Kingthings Italique'; 
    src: local('Kingthings Italique Regular'), 
     local('KingthingsItalique-Regular'), 
     url('Kingthings_Italique.eot'), 
     url('Kingthings_Italique.ttf') format('truetype'); 
}

Entonces IE puede intentar utilizar primero la fuente eot. Otros navegadores (pero no Chrome aparentemente) intentarán usar el eot, y luego recurrirán a la representación de ttf.Por supuesto, esto supone que IE puede manejar la definición de "fuentes alternativas", lo cual no estoy seguro: el @font-face documentation in MSDN no hace referencia a eso.

Fuente

2009-09-05 10:23:55 Guss

Aunque el uso de @ font-face aún no se recomienda debido a la falta de soporte generalizado, existe una forma de utilizar fuentes personalizadas en los navegadores modernos (la mayoría de ellos). Sin embargo, no se olvide de proporcionar una solución de copia de seguridad para la degradación elegante en navegadores más antiguos.

De todos modos, debe consultar this tutorial para obtener más detalles.

Fuente

2009-09-05 13:23:55 Krule

En primer lugar, intenta utilizar rutas absolutas:

url('/Kingthings_Italique.ttf') 

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

Fuente

2009-09-05 16:30:04

Creo que debería tener una sola declaración @ font-face con muchas fuentes para una familia de fuentes. Parece que IE no le gusta tu declaración. El código del artículo mencionado (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 primera fuente debe ser para el archivo EOT. La segunda fuente debe ser para el archivo TTF y comenzar con el nombre de la fuente local. Es algún tipo de truco. El segundo atributo de origen parece no válido para IE, por lo que este navegador usa el primero. Para otros navegadores ambos son válidos, sin embargo, solo el último se usa.

para convertir archivos TTF a EOT He utilizado este pequeño programa: http://code.google.com/p/ttf2eot/

El método debe ser apoyado por exploradores siguientes:

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

He hecho algunas pruebas y me han funcionado. El Chrome 2 es probablemente demasiado viejo.

Fuente

2010-02-12 21:12:05 Michas

Esto no funciona. Consulte mi respuesta para obtener una forma más precisa de insertar fuentes tanto para navegadores IE como no, al mismo tiempo. – Chev

Necesitará bloques para admitir fuentes incrustadas en navegadores IE y no IE.

El bloque IE tendrá que ser el segundo y estar dentro de un comentario de selector de IE.

Por ejemplo:

<style type="text/css"> 
    @font-face 
    { 
      font-family: 'myFont'; 
      src: url('/location/of/myFont.ttf'); 
    } 
</style>

Esto funcionará para todos los navegadores modernos excepto IE (Firefox, Safari, Chrome, etc ...) Ahora para obtener IE comportarse necesitará lo siguiente:

<!--[if IE]> 
<style type="text/css"> 
    @font-face 
    { 
      font-family: 'myFont'; 
      src: url('/location/of/myFont.eot'); 
    } 
</style> 
<![endif]-->

La declaración comment if solo la lee IE desde IE 5 y en adelante. Esto es genial para dar instrucciones especiales a IE. Para los otros navegadores, solo se trata de un texto comentado que no se procesa.

Si usted no tiene un formato .eot de la fuente .ttf entonces usted puede ir a la siguiente dirección http://www.kirsle.net/wizards/ttf2eot.cgi Es muy fácil de usar y genera la fuente .eot para usted en segundos.

+1 si te gusta mi respuesta. Comentar si usted piensa que necesito para mejorar algo :)

Fuente

2010-11-17 17:33:50 Chev

que reconocen esta pregunta es bastante antiguo, pero ahora hay una gran fuente de API de Google que uno puede <link> a: https://developers.google.com/webfonts/

Fuente

2012-07-29 05:42:20

Respuesta

Cuestiones relacionadas