Foros del Web » Creando para Internet » CSS »

Letra negrita en Chrome

Estas en el tema de Letra negrita en Chrome en el foro de CSS en Foros del Web. Hola buenas, probando un trozo de mi página en google chrome me doy cuenta que el texto en negrita que había puesto en mi página ...
  #1 (permalink)  
Antiguo 30/03/2011, 04:01
 
Fecha de Ingreso: marzo-2008
Mensajes: 48
Antigüedad: 16 años, 7 meses
Puntos: 1
Letra negrita en Chrome

Hola buenas,

probando un trozo de mi página en google chrome me doy cuenta que el texto en negrita que había puesto en mi página no se ve en Google Chrome pero si en Firefox y en IE.
Se trata de una fuente externa que defino mediante css de la siguiente forma:

Código HTML:
<style type="text/css">

	
	@font-face {
   	         font-family: punteado; 
   	         src: url("../fonts/V5PRD___.TTF");     
   	         format("truetype");
	}

	p.explicacion{
		font-family: punteado;
		font-size: 13px;
		font-style: normal;
		color: black;
		margin-top:0px;
		margin-bottom:0px;
		align:justify;
	}

</style> 
Luego utilizo la fuente de manera normal de la siguiente forma:


Código HTML:
<p class="explicacion"><b>Texto en negrita:</b> texto normal</p> 
Bueno pues en chrome se me ve de la misma manera el texto en negrita que el texto normal mientras que en firefox y en IE se me ve la negrita.
¿Alguien tiene idea de por qué puede ser? Llevo varios días dándole vueltas ;)

Un saludo y gracias
  #2 (permalink)  
Antiguo 30/03/2011, 11:52
 
Fecha de Ingreso: agosto-2010
Mensajes: 42
Antigüedad: 14 años, 2 meses
Puntos: 2
Respuesta: Letra negrita en Chrome

Cita:
Iniciado por Flinki Ver Mensaje
Hola buenas,

probando un trozo de mi página en google chrome me doy cuenta que el texto en negrita que había puesto en mi página no se ve en Google Chrome pero si en Firefox y en IE.
Se trata de una fuente externa que defino mediante css de la siguiente forma:

Código HTML:
<style type="text/css">

	
	@font-face {
   	         font-family: punteado; 
   	         src: url("../fonts/V5PRD___.TTF");     
   	         format("truetype");
	}

	p.explicacion{
		font-family: punteado;
		font-size: 13px;
		font-style: normal;
		color: black;
		margin-top:0px;
		margin-bottom:0px;
		align:justify;
	}

</style> 
Luego utilizo la fuente de manera normal de la siguiente forma:


Código HTML:
<p class="explicacion"><b>Texto en negrita:</b> texto normal</p> 
Bueno pues en chrome se me ve de la misma manera el texto en negrita que el texto normal mientras que en firefox y en IE se me ve la negrita.
¿Alguien tiene idea de por qué puede ser? Llevo varios días dándole vueltas ;)

Un saludo y gracias
Intentaste con <strong> texto </strong> ? Si no funciona quitale el font-style: normal;
  #3 (permalink)  
Antiguo 31/03/2011, 12:40
 
Fecha de Ingreso: marzo-2008
Mensajes: 48
Antigüedad: 16 años, 7 meses
Puntos: 1
Respuesta: Letra negrita en Chrome

Cita:
Iniciado por Mixvice Ver Mensaje
Intentaste con <strong> texto </strong> ? Si no funciona quitale el font-style: normal;
Buenas! He probado haciendo las dos cosas y nada :S es muy raro.. !
Muchas gracias de todas formas!
  #4 (permalink)  
Antiguo 31/03/2011, 13:14
Avatar de Tecna  
Fecha de Ingreso: enero-2010
Mensajes: 291
Antigüedad: 14 años, 10 meses
Puntos: 45
Respuesta: Letra negrita en Chrome

Buenas,

está totalmente desaconsejado usar etiquetas y atributos para modificar la apariencia de los elementos como puedan ser <b> <i> <center> width align background y otras muchas ya que eso es competencia de css y debe ir en una hoja de estilos externa preferiblemente y seguramente por eso chrome lo ignora. Deberias usar la propiedad font-weight igual que esás haciendo con font-style que es para el estilo de la fuente y no tiene nada que ver con la intensidad que sería la negrita. Si que es verdad que la etiqueta <strong> cada navegador la presenta a su manera y algunos usan negrita para ello, otra razón más para hacerlo con css ya que así podremos nosotros controlar independientemente cada estilo con cada propiedad.
  #5 (permalink)  
Antiguo 31/03/2011, 15:57
 
Fecha de Ingreso: noviembre-2009
Mensajes: 846
Antigüedad: 15 años
Puntos: 34
Respuesta: Letra negrita en Chrome

Por que esta desaconsejado? <strong></strong> es una etiqueta totalmente valida por la W3C
http://www.w3.org/TR/html-markup/strong.html#strong

En CSS corresponde a:
Código CSS:
Ver original
  1. strong {font-weight: bolder; }
  #6 (permalink)  
Antiguo 01/04/2011, 07:12
 
Fecha de Ingreso: marzo-2008
Mensajes: 48
Antigüedad: 16 años, 7 meses
Puntos: 1
Respuesta: Letra negrita en Chrome

No se si alguien mas le ha pasado o no.. :S pero es raro raro!
  #7 (permalink)  
Antiguo 01/04/2011, 07:45
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 17 años, 5 meses
Puntos: 539
Respuesta: Letra negrita en Chrome

Su código ejecutado en chrome, error/despiste del css incluido (align:justify;// la propiedad es text-align) y sin la presencia de la tipografía indicada:



Así que descartado que chrome tenga ningún bug con la etiqueta <b> o <strong> que yo recuerde, sólo restaría una prueba de comprobación de la fuente utilizada y alguna incompatibilidad con ella o que haya algún tema de herencia en el resto de css.

Para ello, le invito a que suba una página de ejemplo donde se manifieste el problema y facilite el enlace.

P.D. 1: su regla @font-face es incompleta. Está dejando fuera varios navegadores.

P.D. 2: no hay etiquetas aprobadas o desaprobadas por sí mismas. Es el tipo de documento declarado (doctype) el que deja deja fuera o acepta unas u otras.
  #8 (permalink)  
Antiguo 02/04/2011, 15:24
 
Fecha de Ingreso: marzo-2008
Mensajes: 48
Antigüedad: 16 años, 7 meses
Puntos: 1
Respuesta: Letra negrita en Chrome

Muchas gracias por tu respuesta Kseso! yo tanbién estoy pensando que sea alguna incompatibilidad con la fuente :S aunque en firefox si que funciona...
En cuando a lo de que dejo fuera varios navegadores, lose, en IExplore de momento no funciona, tenía pensando solucionarlo luego :) ¿Alguna sugerencia?

Aquí pego la página entera:

Código HTML:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<script type="text/javascript" src="ajax.js"></script>

<script src="http://www.google.com/jsapi" type="text/javascript"></script>

<script type="text/javascript" charset="utf-8">
	google.load("jquery", "1.3.2");
</script>

<script src="../static/js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="js/prettyCheckboxes.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/prettyCheckboxes.css" type="text/css" media="screen" title="prettyComment main stylesheet" charset="utf-8" />

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



<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){
		$('#formulario input[type=checkbox],#radioDemo input[type=radio]').prettyCheckboxes();
		$('.inlineRadios input[type=radio]').prettyCheckboxes({'display':'inline'});
	});
</script>


<SCRIPT LANGUAGE=JavaScript>

<!--www.lawebdelprogramador.com-->
<!--
img1=new Image();
img1.src="../../images/grupo2.png";
img2=new Image();
img2.src="../../images/grupo.png";
img3=new Image();
img3.src="../../images/musico2.png";
img4=new Image();
img4.src="../../images/musico.png";
img5=new Image();
img5.src="../../images/micro2.png";
img6=new Image();
img6.src="../../images/micro.png";



function Cambia(refer,nueva) {document[refer].src=eval(nueva+".src") };
//-->
</SCRIPT>


<style type="text/css">

	@font-face {
   	font-family: punteado; 
   	src: url("../../fonts/V5PRD___.TTF");     
   	format("truetype");
	}
	
	@font-face {
   	font-family: rayado; 
   	src: url("../../fonts/edunline.ttf");     
   	format("truetype");
	}
	
	p.local{
		font-family: rayado;
		font-size: 60px;
		font-style: normal;
		letter-spacing: normal;
		color: #ac0909;
		margin-top:0px;
		margin-bottom:0px;
	}
	
	p.explicacion{
		font-family: punteado;
		font-size: 13px;
		color: black;
		margin-top:0px;
		margin-bottom:0px;
		align:justify;
	}
	
	p.registro{
		font-family: punteado;
		font-size: 18px;
		font-style: normal;
		color: black;
		margin-top:0px;
		margin-bottom:0px;
		align:justify;
	}
	
	p.registro2{
		font-family: punteado;
		font-size: 10px;
		font-style: normal;
		color: black;
		margin-top:0px;
		margin-bottom:0px;
		align:justify;
	}
	
	div#contenido{
		width:400px;
		height:450px;
		border: dotted black 0px;
	}
</style>



</head>

<body background="../../images/fondo.png">

<div style="border:solid 0px; margin-left:auto; margin-right:auto; margin-top:80px; width:900px;">
	<table align="center" width="100%" border="0">
		<tr><td align="center" width="395px">
		
		<div id="imagen_formulario">
			<img src="../../images/artistas.png" width="250px"/>
			<p class="local">Artistas!</p>
			<p class="explicacion"><strong>¿Qué eres?</strong> indícanos si sois<br/>
			un grupo, eres un musico en<br/>
			solitario o un cantante.</p>
		</div>
		</td>
	
		<td align="center">
			<div id="contenido">
				<?php include "formulario_paso1.php"; ?>
				
			</div>
			
				
		</td></tr>	
	</table>
</div>


</body>

</html> 

el problema está aquí

Código HTML:
<p class="explicacion"><strong>¿Qué eres?</strong> indícanos si sois<br/>
un grupo, eres un musico en<br/>
solitario o un cantante.</p> 
La negrita sigue sin verse :S en chrome
  #9 (permalink)  
Antiguo 06/04/2011, 11:53
 
Fecha de Ingreso: marzo-2008
Mensajes: 48
Antigüedad: 16 años, 7 meses
Puntos: 1
Respuesta: Letra negrita en Chrome

Al parecer el problema está al instalar fuentes externas, como en mi caso. Con las fuentes normales la negrita funciona perfectamente utilizando la etiqueta <b> o <strong> pero estas etiquetas no funcionan cuando se tratan de este tipo de fuentes.
Alguien tiene alguna idea al respecto? Quizás estoy declarándolas mal??

Un saludo y gracias!
  #10 (permalink)  
Antiguo 06/04/2011, 13:40
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 17 años, 5 meses
Puntos: 539
Respuesta: Letra negrita en Chrome

Cita:
Iniciado por Flinki Ver Mensaje
Al parecer el problema está al instalar fuentes externas, como en mi caso. Con las fuentes normales la negrita funciona perfectamente utilizando la etiqueta <b> o <strong> pero estas etiquetas no funcionan cuando se tratan de este tipo de fuentes.<-- Conclusión errónea. Vea la imagen al final
Alguien tiene alguna idea al respecto? Quizás estoy declarándolas mal??<-- Ya que omite e insiste, me autocito, aunque esté feo

Un saludo y gracias!
Cita:
Iniciado por kseso? Ver Mensaje
...

Para ello, le invito a que suba una página de ejemplo donde se manifieste el problema y facilite el enlace.

...
  #11 (permalink)  
Antiguo 08/04/2011, 03:59
 
Fecha de Ingreso: abril-2011
Mensajes: 12
Antigüedad: 13 años, 7 meses
Puntos: 1
Respuesta: Letra negrita en Chrome

De hecho yo también he tenido problemas con la etiqueta <strong> en Chrome y en otros navegadores. Mi ejemplo es este:
Código HTML:
Ver original
  1. <h3 style="margin-top: 10px; padding-top: 10px;">Actualmente distribuimos en...</h3>
  2. <tr>
  3. <td width="200" style="text-align:center;"><img src="images/distr/mnt_gallery.jpg" alt="Montana Gallery de Barcelona" height="154" width="200"/><br /><h4>Montana Shop & Gallery Barcelona</h4>
  4. <strong>c/</strong> Comerç nº6 - 08003 Barcelona<br />
  5. <strong>phone/fax:</strong> (+34) 93 268 01 91</td>
  6. <td width="200" style="text-align:center;"><img src="images/distr/impaktes.jpg" alt="Impaktes Visuals de Sabadell" /><br /><h4>Impaktes Visuals</h4><br /><strong>c/</strong> Sant Francesc nº 15 - 08203 Sabadell<br />
  7. <strong>phone:</strong> (+34) 93 726 24 99</td>
  8. </tr>

Resultado:


Evidentemente he de decir que la etiqueta strong no ha sido modificada via CSS
Saludos!!!

PD: Mi primer post aqui! :D
  #12 (permalink)  
Antiguo 08/04/2011, 04:08
Avatar de fishdesign  
Fecha de Ingreso: abril-2011
Ubicación: Málaga
Mensajes: 389
Antigüedad: 13 años, 7 meses
Puntos: 95
Respuesta: Letra negrita en Chrome

Cita:
está totalmente desaconsejado usar etiquetas y atributos para modificar la apariencia de los elementos como puedan ser <b> <i> <center> width align background y otras muchas ya que eso es competencia de css y debe ir en una hoja de estilos externa preferiblemente y seguramente por eso chrome lo ignora.
Es justamente al contrario.
La etiqueta <b> y/o <strong>, al igual que <h1>por ejemplo, está aconsejado para un buen SEO.
  #13 (permalink)  
Antiguo 08/04/2011, 10:23
Avatar de Tecna  
Fecha de Ingreso: enero-2010
Mensajes: 291
Antigüedad: 14 años, 10 meses
Puntos: 45
Respuesta: Letra negrita en Chrome

Buenas,

a ver si ahora me explico mejor. Yo dije que está desaconsejado, es decir que no es aconsejable, no que sean o no etiquetas y atributos válidos, que muchos no son válidos, (en función del doctype que por supuesto siempre tiene que estar presente). Lo recomendable tanto por posicionamiento como por accesibilidad es separar la estructura de la presentación y por eso no creo que sea descabellado aconsejar que se usen hojas de estilo externas para controlar todo lo que tenga que ver con la presentación y posición de los elementos que forman la estructura del documento y más en un foro de CSS.

El caso de las etiquetas <em> y <strong> (no el de <b>) es distinto porque si que dan un sentido a la estructura del contenido enfatizándolo, pero siempre y cuando se use bien y realmente el contenido merezca ser enfatizado y no se use como mero adorno. Y como no todos los navegadores lo muestran igual en su hoja de estilos por defecto si queremos que se vea igual en todos tendremos que modificar sus propiedades css.

Lo recomendable no sólo por seo también por accesibilidad, es hacer un correcto marcado y usar cada etiqueta para lo que es, para que den un sentido al contenido, usando correctamente los encabezados, listas, tablas y demás elementos, no usando elementos vacios para efectos de presentación y separando completamente contenido, estructura, programación y presentación.

Así lo recomienda el punto 3.3 de las pautas de accesibilidad.

Etiquetas: chrome, letra, negrita
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 03:33.