css en chrome

[standby82]

Hola, creo que me estoy volviendo loco.

Estoy creando una web en php con un css y me va todo de maravilla menos una cosa que me trae de cabeza:

He conseguido que mi web se vea bien en los tres exploradores Firefox, Explorer y Chrome, menos una cosa; no consigo hacer que el texto salga en negrita en el Chrome.

Aqui os dejo mi css, que como veis no tiene mucho jaleo

___________________________

.c1 { color:purple; font-size:14px; font-weight:bold; font-family:bodaweb, bodaweb2; border:0px solid #FF8000 }

.c2 { color: grey; font-size:14px; font-weight:bold; font-family:bodaweb, bodaweb2; border:0px solid #FF8000; cursor: pointer}

.c3 {color: blue; font-size:14px; font-weight:bold; font-family:bodaweb, bodaweb2}

.c4 {color: orange; font-size:14px; font-weight:bold; font-family:bodaweb, bodaweb2; cursor:default}

.c5 {background-color:#ede9d6}

.c6 {resize:none; bgcolor:transparent}

.c7 {color: FF8000; font-size:23px; font-weight:bold; font-family:bodaweb, bodaweb2}

.c8 {color: FF8000; font-size:15px; font-weight:bold; font-family:bodaweb, bodaweb2}

.c9 {color: #996699; font-size:15px; font-weight:600; font-family:bodaweb, bodaweb2}


@font-face {font-family: "bodaweb"; src: url("mareensprint.eot")}
@font-face {font-family: "bodaweb2"; src: url("mareensprint.ttf")}

_________________________________________________

Le aplico el estilo c9 al texto y este sale normal en Chrome y en negrita en los demás exploradores.

He probado a poner: font-weight:100, font-weight:bold, font-weight:900 ... y nada, no lo consigo, esto va a dar conmigo.

A ver si a alguien se le ocurre lo que puede pasar.

Por cierto el resto de las propiedades del estilo c9 si las coje bien el chrome.

Un saludo y gracias

[cristian_cena]

Sobre la compatibilidad:
Una declaración de @font-face crossbrowser tiene esta forma:

Código CSS:

@font-face {
    font-family: 'FedraSansProBoldItalic';
    src: url('fedrasanspro_bolditalic-webfont.eot');
    src: url('fedrasanspro_bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fedrasanspro_bolditalic-webfont.woff') format('woff'),
         url('fedrasanspro_bolditalic-webfont.ttf') format('truetype'),
         url('fedrasanspro_bolditalic-webfont.svg#FedraSansProBoldItalic') format('svg');
    font-weight: normal;
    font-style: normal;
}
 

A notar, los src con los .eot, .otf .woff, .ttf y .svg
Si solo tenes por ejemplo los .otf podes usar el fontface-generator de fontsquirrel.com para conseguir los demás.

Además presta atencion en la definición de font-style y de font-weight.
Esto debería ayudar a aclarar:

Código CSS:

@font-face{ 
    font-family: 'AleNormal'; 
    font-style: normal; 
    font-weight: normal; 
    src: url(Alegreya-Regular.otf); 
} 
@font-face{ 
    font-family: 'AleBold'; 
    font-style: normal; 
    font-weight: bold; 
    src: url(Alegreya-Black.otf); 
} 
@font-face{ 
    font-family: 'AleItalic'; 
    font-style: italic; 
    font-weight: normal; 
    src: url(Alegreya-Italic.otf); 
} 
span   { font-family: aleNormal;}
strong { font-family: aleBold;}
em     { font-family: aleItalic;}
 

Código HTML:

<span>normal</span> <br/>
<strong>bold</strong> <br/>
<em>italic</em>
 

[standby82]

Hola, gracias por tu respuesta, pero yo soy novato en este tema y para ser cincero no me he enterado mucho de tu explicacion.

He declarado el @font-face, como me has puesto y ahora no se pone en negrita en ningun explorador.

Te dejo el codigo
_______________________________________

@font-face {
font-family: 'bodaweb';
src: url('mareensprint.eot');
src: url('mareensprint.eot?#iefix') format('embedded-opentype'),
url('fedrasanspro_bolditalic-webfont.woff') format('woff'),
url('mareensprint.ttf') format('truetype'),
url('mareensprint.svg#FedraSansProBoldItalic') format('svg');
font-weight:bold;
font-style:normal;
}





.c1 { color:purple; font-size:14px; font-weight:bold; font-family:bodaweb; border:0px solid #FF8000 }
.c2 { color: grey; font-size:14px; font-weight:bold; font-family:bodaweb; border:0px solid #FF8000; cursor: pointer}
.c3 {color: blue; font-size:14px; font-weight:bold; font-family:bodaweb}
.c4 {color: orange; font-size:14px; font-weight:bold; font-family:bodaweb; cursor:default}
.c5 {background-color:#ede9d6}
.c6 {resize:none; bgcolor:transparent}
.c7 {color: FF8000; font-size:23px; font-weight:bold; font-family:bodaweb}
.c8 {color: FF8000; font-size:15px; font-weight:bold; font-family:bodaweb}
.c9 {color: FF8000; font-size:15px; font-family:bodaweb}

__________________________________________________ __

Le sigo aplicando el estilo c9

[cristian_cena]

ve aquí y genera tus fuentes. fontsquirrel hará todo el trabajo, hasta te creará un archivo css por fuente con el @font-face correspondiente. Buscalos y lleva ese código donde quieras mientras mantengas la ruta a la fuente.
Luego asegurate de que en la declaracion de @font-face coloques un valor para font-weight y otro para font-style. Esto es lo que te está faltando.

este ejemplo te va a servir:

Código CSS:

@font-face{ 
    font-family: 'ale'; 
    font-style: normal; 
    font-weight: normal; 
    src: url(Alegreya-Regular.otf); 
} 
@font-face{ 
    font-family: 'ale'; 
    font-style: normal; 
    font-weight: bold; 
    src: url(Alegreya-Black.otf); 
} 
@font-face{ 
    font-family: 'ale'; 
    font-style: italic; 
    font-weight: normal; 
    src: url(Alegreya-Italic.otf); 
} 
/*
notar que:
- pusimos un mismo nombre (ale) a todas las fuentes que forman parte de la misma "familia tipografica".
- declaramos distintos valores de font-weight y font-style, en otras palabras: tratamos las fuentes como "variables tipograficas" de la misma familia
*/
span   { font-family: ale; }
strong { font-family: ale; font-weight:bold;}
em     { font-family: ale; font-style:italic;}
/*
notar que: 
- llamamos la fuente y diferenciamos por su valor de font-weight y/o font-style
- si omitimos valor para font-weight y font-style por defecto va a tomar "normal"
por lo tanto: 
span   { font-family: ale; }
es equivalente a:
span   { font-family: ale; font-weight: normal; font-style: normal;}
*/
 

Controla no estes pisando los estilos. Desconozco tu html. Siguiendo estos pasos lo vas a lograr.

Suerte.

[standby82]

Gracias lo pruebo y te digo.

Un saludo

[standby82]

pensandolo bien, yo pienso que lo tengo co tu dices:

Tengo declarado con @font-face los valores para font-weight y font-style. y tengo puesto font-weight:bold; con esto ya me debería aparecer en negrita.

codigo__________

@font-face {
font-family: 'bodaweb';
src: url('mareensprint.eot');
src: url('mareensprint.eot?#iefix') format('embedded-opentype'),
url('fedrasanspro_bolditalic-webfont.woff') format('woff'),
url('mareensprint.ttf') format('truetype'),
url('mareensprint.svg#FedraSansProBoldItalic') format('svg');
font-weight:bold;
font-style:normal;
}
_______________________


luego donde quiera le apico el estilo c9 que es el siguiente:

codigo___________________________

.c9 {color: FF8000; font-size:15px; font-family:bodaweb}
________________________________________

Segun esto el estilo c9 deberia tener las caracteristicas de la font.family bodaweb y es así, todo está bien, el color, el tamaño el tipo de letra, todo menos que esta en negrita.

Tambien he pobado a poner en sl estilo .c9 lo siguiente, pero tampoco
.c9 {color: FF8000; font-size:15px; font-weight:bold; font-family:bodaweb}

[cristian_cena]

¿tenes las fuentes (mareensprint.eot, etc) en el mismo directorio que tu hoja de estilos?
.c9{ font-family:bodaweb; font-weight: bold; color: #FF8000;}

[kseso?]

Anda por ahí un medio bug de chrome con font-face y las fuentes que no tienen más que un estilo en el peso.

Creo recordar que todo pasa por declarar exprofeso el weight en normal en la regla font-face y posteriormente en el elemento el bold/bolder.

Y mejor utilizar esta nomenclatura (normal | bold | bolder | lighter ) que la numeral.

[standby82]

CONSEGUIDO!!!

1º) He declarado weight en normal en la regla font-face
2º) En el estilo.c9 he declarado font-weight: bold

Aunque si os soy sincero, creo que así ya había estado, pero el caso es que ahora funciona perfectamente en los 3 navegadores.

Muchas gracias a todos sois unos cracks y gracias por vuestro tiempo.