Foros del Web » Creando para Internet » CSS »

Duda con Csss3 @face font

Estas en el tema de Duda con Csss3 @face font en el foro de CSS en Foros del Web. Hola. Estoy intentando utilizar una fuente particular en mi pagina web y para eso utilizo @face font. La duda es la siguiente: si lo declaro ...
  #1 (permalink)  
Antiguo 25/07/2014, 12:50
Avatar de intiweb  
Fecha de Ingreso: mayo-2009
Ubicación: Capital Federal
Mensajes: 363
Antigüedad: 13 años, 2 meses
Puntos: 5
Duda con Csss3 @face font

Hola.
Estoy intentando utilizar una fuente particular en mi pagina web y para eso utilizo @face font.
La duda es la siguiente:

si lo declaro de la siguiente manera:
en un archivo .css definido lo siguiente:
Código CSS:
Ver original
  1. @font-face {
  2.    font-family: JasmineUPC;
  3.    src: url(../fuentes/upcjl.ttf);
  4. }
  5.  
  6. main div#titulo{
  7.  
  8.     position: relative;
  9.     height: 50px;  
  10.    
  11.     padding-top: 0px;
  12.     margin-left: auto;
  13.     margin-right: auto;
  14.     top: 30px;
  15.  
  16.     text-align: center;
  17.     font-size:80px;
  18.     font-family: JasmineUPC;
  19.     font-style: none;
  20.     text-shadow:0px 0px 30px #000;
  21.     text-decoration: none;
  22.     color: #FFFFFF;
  23.  
  24.     z-index:0;
  25. }

Y luego en el html defino el div de la siguiente manera:


Código HTML:
<div id="titulo">Bio construcción</div> 
Lo que obtengo como resultado es la funte que cargue pero un poco mas chiqua y en bold.

Ahora si al @font face le agrego el bold de la siguiente manera:
Código CSS:
Ver original
  1. @font-face {
  2.    font-family: JasmineUPC;
  3.    src: url(../fuentes/upcjl.ttf);
  4.    font-weight: bold;
  5. }

entonces la fuente se ve bien sin el bold pero cuando le pongo la etiqueta <b></b> al texto tampoco se ve como bold.

Alguien sabe porque este comportamiento al reves y extraño ?
__________________
un saludo..... . . .
  #2 (permalink)  
Antiguo 27/07/2014, 22:47
 
Fecha de Ingreso: marzo-2011
Ubicación: Oaxaca
Mensajes: 252
Antigüedad: 11 años, 4 meses
Puntos: 17
Respuesta: Duda con Csss3 @face font

El detalle esta en que necesitas tener las otras tipografias restantes y mandarlas a llamar para que te funcionen en todos los navegadores

revisa esto
http://css-tricks.com/snippets/css/using-font-face/
  #3 (permalink)  
Antiguo 28/07/2014, 01:45
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.487
Antigüedad: 20 años
Puntos: 2114
Respuesta: Duda con Csss3 @face font

Aparte de mirar lo que propone @juangemelo01, ¿la fuente que cargas no será la versión negrita de la tipografía?

Para usar una fuente de forma correcta, con su cursiva, negrita y demás, deberías de cargar las que necesites de alguna forma como esta:

Código CSS:
Ver original
  1. @font-face {
  2.   font-family: JasmineUPC;
  3.   src: url(../fuentes/upcjl_regular.ttf);
  4.   font-weight: normal;
  5.   font-style: normal;
  6. }
  7.  
  8. @font-face {
  9.   font-family: JasmineUPC;
  10.   src: url(../fuentes/upcjl_bold.ttf);
  11.   font-weight: 700;
  12.   font-style: normal;
  13. }
  14.  
  15. @font-face {
  16.   font-family: JasmineUPC;
  17.   src: url(../fuentes/upcjl_italic.ttf);
  18.   font-weight: normal;
  19.   font-style: italic;
  20. }

Es sólo un ejemplo. Como ves no cambia el nombre de la fuente, pero si el archivo a llamar y varían su weight y style.

Puedes no hacerlo así y depender del resampleado que haga el navegador. Pero no suele ser muy fiel a la tipografía. Aunque gente sin obsesión por los detalles a veces no lo nota.

Aparte, siguiendo con el problema, tienes que fijarte si no estás usando la fuente dentro de una etiqueta que por defecto muestra las fuentes en negrita, como lo puede ser un encabezado (h1) y demás. Que juraría que el otro día cuando vi el post vi algo de eso.
  #4 (permalink)  
Antiguo 28/07/2014, 11:47
Avatar de intiweb  
Fecha de Ingreso: mayo-2009
Ubicación: Capital Federal
Mensajes: 363
Antigüedad: 13 años, 2 meses
Puntos: 5
Respuesta: Duda con Csss3 @face font

gracias por el dato !!
__________________
un saludo..... . . .

Etiquetas: color, face, font, html
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:11.