Especificar el estilo y el grosor de las fuentes de Google


110

Estoy usando fuentes de Google en algunas de mis páginas y golpeo una pared cuando intento usar variaciones de una fuente. Ejemplo: http://www.google.com/webfonts#QuickUsePlace:quickUse/Family:Open+Sans

Estoy importando tres caras, Normal, Negrita, ExtraNegrita a través de la etiqueta de enlace. La cara normal se muestra correctamente, pero no puedo entender cómo usar las variantes de la fuente en mi CSS

Intenté todo lo siguiente como atributos para la familia de fuentes, pero sin dados:

  • 'Open Sans Bold'
  • 'Open Sans 700'
  • 'Open Sans Bold 700'
  • 'Open Sans: Bold'

Los propios documentos de Google no ofrecen mucha ayuda. ¿Alguien tiene una idea de cómo debo escribir mis reglas CSS para mostrar estas variantes?

Respuestas:


149

Usan CSS regular.

Simplemente use su familia de fuentes habitual como esta:

font-family: 'Open Sans', sans-serif;

Ahora decide qué "peso" debe tener la fuente agregando

para semi-negrita

font-weight:600;

para negrita (700)

font-weight:bold;

para más atrevido (800)

font-weight:800;

Así, es una prueba de respaldo, por lo que si la fuente de Google "falla", su fuente de respaldo Arial / Helvetica (Sans-serif) use el mismo peso que la fuente de Google.

Muy inteligente :-)

Tenga en cuenta que los diferentes pesos de fuente deben importarse específicamente a través de la URL de la etiqueta de enlace (parámetro de consulta familiar de la URL de fuente de Google) en el encabezado.

Por ejemplo, el siguiente enlace incluirá los pesos 400 y 700:

<link href='fonts.googleapis.com/css?family=Comfortaa:400,700'; rel='stylesheet' type='text/css'>

56
esto es una verdad parcial, y se debe a que si no asigna el peso en el enlace CSS, Google no descargará el formato "negrita" adecuado para lograrlo, debe declarar el "enlace href" de la siguiente manera: <link href = ' fonts.googleapis .com / css? family = Comfortaa: 400,700 'rel =' stylesheet 'type =' text / css '>
ncubica

3
¿Hay alguna forma de hacer que el navegador use un peso de 600 para las viejas reglas de "negrita"? Creo que el 700 es demasiado grueso y no lo quiero en ningún lugar de mi sitio.
Nic Cottrell

¿Qué quieres decir? Supongo que deberías cambiar la negrita a 600 ?. ¿Te refieres a cambiar el comportamiento "audaz" en <strong>y <b>?
Marco Johannesen

2
Estoy usando @import url ( fonts.googleapis.com/css?family=Open+Sans:400,300 ); como no puedo acceder al html, y cuando intento usar lo siguiente ... font-family: 'Open Sans', sans-serif; peso de fuente: 300; no cambia el peso de la fuente. ideas?
Tony Ray Tansley

@TonyRayTansley, ¿lo tiene en la primera línea del archivo CSS? : I
Marco Johannesen

11

Aquí está el problema: no puede especificar pesos de fuente que no existen en el conjunto de fuentes de Google. Haga clic en el enlace VER MUESTRA debajo de la fuente, luego desplácese hacia abajo hasta la sección ESTILOS. Allí verá cada uno de los "estilos" disponibles para esa fuente en particular. Lamentablemente, Google no enumera los pesos de fuente CSS para cada estilo. Así es como los nombres se asignan a los números de peso de fuente CSS:

Thin            100     
Extra Light     200
Light           300
Regular         400
Medium          500
Semi-Bold       600
Bold            700
Black           900

Tenga en cuenta que muy pocas fuentes tienen los 9 pesos.


9

font-family:'Open Sans' , sans-serif;

Para luz: font-weight : 100; O font-weight : lighter;

Para normal: font-weight : 500; O font-weight : normal;

Para negrita: font-weight : 700; O font-weight : bold;

Para más atrevido: font-weight : 900; O font-weight : bolder;


Excelente. Pero, ¿la fuente puede ser más ligera que el peso de la fuente: 100?
John Max

3
No, el valor mínimo es solo 100 y el valor máximo es 900.

2
Esto no es correcto, se deben considerar los siguientes valores: light: font-weight: 300; normal: font-weight: 400; semi-bold: font-weight: 600; bold: font-weight: 700; extra bold: font-weight: 800;
geraldo

2

puede utilizar el valor de peso especificado en las fuentes de Google.

body{
 font-family: 'Heebo', sans-serif;
 font-weight: 100;
}
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.