No estoy usando flash o php, y me han pedido que agregue una fuente personalizada a un diseño HTML simple. "KG June Bug"Cómo instalo una fuente personalizada en un sitio HTML
Lo he descargado localmente, ¿hay un truco de CSS simple para lograr esto?
Sí, puede usar la función CSS llamada @ font-face. Solo se ha aprobado oficialmente en CSS3, pero se ha propuesto e implementado en CSS2 y se ha admitido en IE durante bastante tiempo.
se declara en el CSS de esta manera:
@font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); }
@font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf');}
Entonces, sólo puede hacer referencia a ella como las otras fuentes estándar:
h3 { font-family: Delicious, sans-serif; }
Por lo tanto, en este 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>
Y solo necesita poner el JUNEBUG.TFF en la misma ubicación que el archivo html.
He descargado la fuente de la página web dafont.com:
Usted puede usar @ font-face en la mayoría de los navegadores modernos.
He aquí algunos artículos sobre cómo funciona:
Aquí es una buena sintaxis para agregar la fuente a su aplicación:
Aquí hay un par de lugares para convertir las fuentes para su uso con @ font-face:
también Cufon funcionará si no' Quiero usar font-face, y tiene buena documentación en el sitio web:
Para el mejor soporte de los navegadores posible, su código CSS debe tener este aspecto:
@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;
}
Para obtener más información, consulte el artículo Using @font-face en CSS-tricks.com.
Prueba este
@font-face {
src: url(fonts/Market_vilis.ttf) format("truetype");
}
div.FontMarket {
font-family: Market Deco;
}<div class="FontMarket">KhonKaen Market</div>vilis.org
hay una manera simple de hacer esto: en el archivo html complemento:
<link rel="stylesheet" href="fonts/vermin_vibes.ttf" />
Nota : pones el nombre del archivo .ttf yo tienes. luego ir a al archivo CSS y añadir:
h1 {
color: blue;
font-family: vermin vibes;
}
Nota: se pone el nombre de la fuente que tiene familia de fuentes.
Nota: no escriba el nombre de la familia de fuentes como su nombre de font.ttf ejemplo: si su nombre de font.ttf es: "vermin_vibes.ttf" su familia de fuentes será: familia de fuentes "vermin vibes" doesn No contiene caracteres especiales como "-, _" ... etc, solo puede contener espacios.
Realmente debe definirlo como un 'font-face' en CSS en lugar de requerir un archivo ttf. – Arcath
no es obligatorio hacerlo así que simplemente puede hacerlo así. Siempre lo hago de las dos maneras y ambos funcionan –
Si está utilizando una hoja de estilo externa, el código podría ser algo como esto:
@font-face { font-family: Junebug; src: url('Junebug.ttf'); }
.junebug { font-family: Junebug; font-size: 4.2em; }
y debe ser guardado en un archivo .css independiente (por ejemplo styles.css). Si su archivo .css está en una ubicación separada del código de la página, el archivo de la fuente real debe tener la misma ruta que el archivo .css, NO el archivo de la página web .html o .php. A continuación, la página web necesita algo como:
<link rel="stylesheet" href="css/styles.css">
en la sección de > < cabecera de la página HTML. En este ejemplo, el archivo de fuente debe ubicarse en la carpeta css junto con la hoja de estilo. Después de esto, simplemente agregue la clase = "junebug" dentro de cualquier etiqueta en su html para usar la fuente Junebug en ese elemento.
Si usted está poniendo el css en la página web actual, agregar la etiqueta de estilo en la cabeza del HTML como:
<style>
@font-face { font-family: Junebug; src: url('Junebug.ttf'); }
</style>
Y el estilo elemento real puede o bien ser incluido en la anterior y <style> llamado por elemento por clase o ID, o puede simplemente declarar el estilo en línea con el elemento. Por elemento quiero decir <div>, <p>, <h1> o cualquier otro elemento dentro del html que necesite usar la fuente Junebug. Con estas dos opciones, el archivo de fuente (Junebug.ttf) debe ubicarse en la misma ruta que la página html.De estas dos opciones, la mejor práctica se vería así:
<style>
@font-face { font-family: Junebug; src: url('Junebug.ttf'); }
.junebug { font-family: Junebug; font-size: 4.2em; }
</style>
y
<h1 class="junebug">This is Junebug</h1>
Y la forma menos aceptable sería:
<style>
@font-face { font-family: Junebug; src: url('Junebug.ttf'); }
</style>
y
<h1 style="font-family: Junebug;">This is Junebug</h1>
La razón por la que no es bueno usar los estilos en línea es la mejor práctica que dicta que los estilos deben mantenerse en un solo lugar, por lo que la edición es práctica. Esta es también la razón principal por la que recomiendo usar la primera opción de usar hojas de estilo externas. Espero que esto ayude.
lo siento si es "tarea", ¿cuál sería el código si usara esta fuente JUNEBUG solo para el texto sin formato – adam
He actualizado la respuesta. Buena fuente buscando por cierto. –
No sabía que pudieras hacer eso. ¿Funciona en otros navegadores también? –