Google Chrome - Foro de ayuda

¿Google Chrome muestra más gruesas las tipografías Light?

erre
17/07/14 11:04
1) Escribe versión de Google Chrome (chrome://version/):  Versión 36.0.1985.125

2) ¿Se reproduce el problema en una ventana de incógnito? Control+Mayúsculas+N  SÍ

3) Adjunta una captura de la pantalla de tu problema/error/incidencia:   



4) Describe detalladamente el problema:

Buenas tardes,

Si abrís la web www.azinsol.com/demo, la tipografía que aplico en "Algo...está a punto de suceder" es la Source Sans Pro de Google Fonts y le aplico un grueso en el css de 200.

Mi problema es que nose porque si la abro en Chorme se ve bastante más gruesa, que si por ejemplo la abro en Safari.

Os agradecería mucho si me pudiéseis ayudar.

Un saludo.



-----------------------------------------

css que aplico:
h1
        {
                font-weight: 200;
                line-height: 1.2em;
                font-size: 70px;
                letter-spacing: 3px;
                font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
}

.slides-titulo{
  position: absolute;
  z-index:2;
  top:33%;
  margin: 0 60px;
  font-weight:200;
  width: 50%;
  font-family:'Source Sans Pro', Arial, Helvetica, sans-serif;
  font-size:70px;
  line-height:1.2em;
  color:#fff;
}


----------------------------------------

html que aplico:

<!DOCTYPE html>

<html class='no-js' lang='es'>
        <!--<![endif]-->
<head>
                <meta charset='utf-8' />
                <!--<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible' />
                <meta name="viewport" content="width=device-width, initial-scale=1.0">-->
                <title>Azinsol  |  A to Z Innovative Solutions</title>
                
                <meta content='Azinsol Innovative Solutions Streaming video' name='description' />
                <meta content='Erre Infographics' name='author' />
                
                <meta name="distribution" content="global" />
                <meta name="language" content="es" />
                <!--<meta content='width=device-width, initial-scale=1.0' name='viewport'/>-->
                
                <link rel="stylesheet" href="http://www.azinsol.com/demo/css/superslides.css">
                <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,400italic" rel="stylesheet" type="text/css">
               <link href="http://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500" rel="stylesheet" type="text/css">
       
               <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        
        <style type="text/css">
                body {
                        background-color: #000;
                }
    </style>
   
<link href="css/superslides.css" rel="stylesheet" type="text/css">
</head>
   
    <body id ="bdy" onclick = "check(event)">
            
            <div id="slides">    
               
                <div class="slides-container">
                  <img src="http://www.azinsol.com/demo/images/medicina-01.png" alt="" width="1400" height="1050"/>
                  <img src="http://www.azinsol.com/demo/images/retail-01.png" alt="" width="1400" height="1050"/>
                </div>
              </div>


<div class="slides-titulo">
                                <h1>Algo <span style="font-weight:700">muy bueno</span> </br>está a punto de llegar</h1>
                    <h2>Innovación y soluciones TIC</h2>
                          </div>
(.......)

Respuestas (4)

Dennis Tobar
17/07/14 11:26
Hola,

Estaba revisando el código y me topé en que tienes el estilo inline, por lo cual sobrepasa al estilo definido en la hoja de estilos.

Al consultar las herramientas de desarrollo, me topo con el siguiente orden: 

Por lo cual, el resto de la hoja que afecte el grosor de la tipografía quedará inválido.

Espero te aclare parte de tu duda...

Saludos!
erre
17/07/14 12:53
Hola Dennis!

Primero de todos muchas gracias por responder tan rápido! Te lo agradezco :-)

El style in-line lo he puesto así para sólo cambiar las palabras "muy bueno" (de forma rápida...)
Igualmente lo he quitado para probar pero me sigue saliendo el mismo grosor... te adjunto imagen con el código de Chrome...

Seguiré probando a ver... se me está colando algo y no se qué es... toda ayuda es bienvenida!

Dennis Tobar
17/07/14 14:08
Hola,

Estaba buscando en Google para alguna ayuda y me topé con el tema de los @media queries en CSS, en especial en Safari: http://www.sitepoint.com/forums/showthread.php?1158841-Media-queries-not-working-with-Safari

Creo que es posible que el error pasé por ahí, aunque no estoy muy seguro, ya que he desactivado los elementos de la hoja de estilo para quedarme con el h1 definido sin media query y funciona bastante bien, pero al habilitar el siguiente media query (@media (max-height: 321px)), me renderiza 100 y no 200 (para pruebas fue 900).

Quizás, y no estoy seguro, iría por definir que el max es un handheld, pero no estoy seguro: http://www.w3.org/TR/css3-mediaqueries/

Espero te sea útil...

Saludos
erre
17/07/14 14:35
Dennis!!!

Acabo de encontrar lo que me faltaba en el CSS!!

html{
        -webkit-font-smoothing: antialiased;
        text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}


uf... por fin... Muchas gracias por la ayuda! ;-)