Establecer font-weight vs bold font-family en CSS, ¿cuál es más correcto?

9

Básicamente, hay dos formas de poner una fuente en negrita en CSS: mediante el font-familyatributo y mediante el font-weightatributo.

Digamos que estoy usando la fuente Raleway, por ejemplo, y he cargado una variante Light, una Regular, una Semibold y una Bold a través de css. Podría poner un encabezado simple en negrita configurándolo en h1{font-family: 'Raleway Bold'}o en h1{font-weight: 700}.

¿Cuál de estos es más correcto, o son ambos iguales?

css web-fonts html pooja
fuente
Tengo dudas, ya sea que escribir "font-weight" en css es correcto, cuando tiene todas las opciones en la familia de fuentes. Por ejemplo: la fuente Raleway tiene todas las opciones, desde ligera hasta extra negrita. Entonces, de qué manera es apropiado usar todas las fuentes de la familia, para que no podamos perder el carácter de fuente.
pooja
1
Preguntas y respuestas muy relacionadas .
Cai
@poojaa, me he tomado la libertad de editar su pregunta para aclarar el formato y poner la pregunta real en primer plano. Si siente que he cambiado el significado, siempre puede editarlo usted mismo.
PieBie

Respuestas:

6

Digamos que hemos cargado una variante de fuente Bold así:

@font-face {
  font-family: 'Raleway Bold';
  font-style: normal;
  font-weight: 700;
  src: url(path/to/font/raleway-bold.woff2) format('woff2');
}

Yo argumentaría a favor del uso de ambos font-familyy font-weighten su especificación de estilo. Por ejemplo:

h1 {
  font-weight: 700;
  font-family: 'Raleway Bold', Helvetica, Arial, sans;
}

Básicamente, ambos hacen lo mismo: diga a su título1 que esté en negrita. Esto no duplicará la audacia ni nada, solo repite que debe ser audaz.

La razón de esto es bastante simple: si su archivo de fuente no está cargado (sobrecarga del servidor, restricciones del cliente, vudú), su visitante seguirá viendo una fuente en negrita (en este caso, una Helvetica en negrita falsa) y, por lo tanto, puede distinguir entre un título y el texto del cuerpo, que no sería el caso si solo hubiera especificado el font-family.

Ver en esta imagen el conjunto superior es Raleway y Raleway Italic pero tiene el Raleway Italic apropiado cargado con:

<link href='https://fonts.googleapis.com/css?family=Raleway:500,500italic' rel='stylesheet' type='text/css'>

La parte inferior solo carga Raleway. Como resultado, el conjunto inferior tiene Raleway y FAUX Raleway en cursiva. Tenga en cuenta las diferencias en minúsculas "a" y "k", por ejemplo, entre la cursiva real y la cursiva falsa. Una fuente bien diseñada tendrá diferencias entre regulares, negrita y cursiva que no obtendrá si no las carga.

ingrese la descripción de la imagen aquí

PieBie
fuente
El uso de un nombre de familia y solo establecer pesos aún le dará el peso correcto en el caso de que los archivos de fuentes no se carguen. La única razón para usar ambos sería por razones de compatibilidad.
Cai
1
Estás confundido. Su ejemplo de fuente de Google no solo se refiere a la letra cursiva de Raleway solo font-family: 'Raleway'(contradiciendo su ejemplo en negrita anterior) sino que, además, independientemente de nombrar a toda la familia Ralewayo cada variante individualmente con diferentes nombres de familias de fuentes, no tiene absolutamente ninguna relación con la aplicación de imitación o no . Incluso su propio ejemplo demuestra que este es un método incorrecto, como font-family: 'Raleway Bold', Helvetica, Arial, sans;lo ha hecho, Helvetica Boldy de manera Arial Boldindividual, porque esa es solo la forma incorrecta de conectar en cascada las variantes de fuente.
rgthree
1

Si bien ambas formas le darán la salida correcta, la forma más correcta sería usar una sola familia de fuentes para agrupar todas las diferentes variantes de pesos y estilos. Es de la misma manera que usa las fuentes del sistema (desde 'Arial' hasta 'sans-serif') y, de hecho, si usa las fuentes de Google para cargar Raleway, estaría usando la ruta de la familia de fuentes individuales.

Esbocemos varias razones por las cuales este es el método correcto.

Reduce la complejidad de CSS y, en última instancia, el tamaño del archivo

Tener una sola familia de fuentes significa que puede definir un elemento contenedor completo con la familia de fuentes, y solo ciertos elementos con diferentes pesos / estilos. Tome lo siguiente, por ejemplo:

html {
  font-family: Raleway;
}
.bold {
  font-weight: 700;
}
.italic {
  font-style: italic;
}
.footer {
  font-family: Arial;
}

<p>I'm raleway font, <span class="bold">and I'm raleway bold</span></p>
<div class="bold italic">I'm Raleway Bold Italic!</div>
<div class= footer>I'm <span class="bold">Arial Bold,</span> w/ the same class!</div>

Observe cuán agradable y consistente es este CSS. No necesitábamos especificar "RalewayBold" como la familia de fuentes para .bold, ni "RalewayItalic" para nuestro .italic. De hecho, ni siquiera necesitamos especificar una variante en negrita y cursiva, ya que nuestras clases simplemente funcionarán. Además, si .bold está dentro de nuestro .footer, estará en negrita Arial y no en Raleway, porque simplemente hereda Arial del contenedor de pie de página.

Es la forma en que lo hace el navegador.

Lo anterior es esencialmente cómo la hoja de estilo interna del navegador define las fuentes mediante el uso de estilos mínimos y la naturaleza en cascada inherente de CSS.

Es la forma en que lo hace la industria y lo ha hecho.

Las mayores propiedades web, aplicaciones y editores lo hacen de esta manera. Google, Facebook, NYT, ESPN, etc., todos definen y usan fuentes de esta manera.

No solo eso, sino que las interfaces de usuario antes del CSS o incluso de Internet especifican familias de fuentes individuales y eligen variantes basadas en diferentes especificaciones de peso y estilo. Cargue Microsoft Word, KeyNote, Google Docs, incluso un antiguo WordPerfect de finales de los 90 y abra el menú desplegable de fuentes; Verá el nombre de la familia de fuentes "Arial" en la lista; no "Arial" seguido de "Arial Bold" seguido de "Arial Italic", etc.

Simplemente cargue desde Google Fonts.

Si carga Raleway desde el repositorio gratuito de webfonts en Google Fonts, verá que Raleway se define con un solo apellido:

https://fonts.googleapis.com/css?family=Raleway:400,400italic,500,500italic,700,700italic

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: url(https://...Raleway-Regular.woff2) format('woff2');
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  src: url(https://...Raleway-Bold.woff2) format('woff2');
}
@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 500;
  src: url(https://...Raleway-MediumItalic.woff2) format('woff2');
}
@font-face {
  font-family: 'italic';
  font-style: normal;
  font-weight: 700;
  src: url(https://...Raleway-BoldItalic.woff2) format('woff2');
}
rgthree
fuente
¿Este método no ignora las variaciones entre los estilos de fuente para los falsos?
Ryan
@ Ryan No, en absoluto. De hecho, el nombre de la familia de fuentes (ya sea agrupando correctamente la familia como Ralewaycon las variantes de peso / estilo, o definiendo incorrectamente variantes individuales Raleway Boldy Raleway Italiccomo familias de fuentes individuales) no tiene relación con la aplicación de variaciones falsas o no. De hecho, agrupar correctamente a la familia con el mismo nombre ayuda al navegador a elegir una variación más cercana para aplicar un estilo falso, mientras que nombrar incorrectamente cada variación por separado mantiene al navegador en la oscuridad de las fuentes disponibles para aplicar variaciones si no se carga la fuente deseada.
rgthree
(1) Simplemente cargue desde las fuentes de Google : para los sitios web seguro, pero hay muchas otras instancias donde se usa html / css donde no se garantiza una conexión a Internet y tiene que cargar las fuentes localmente, (2) Reduce la complejidad de CSS y, en última instancia, el tamaño del archivo : por lo que ahorrará 1kb en un sitio o aplicación que tiene docenas de MB, el cliente se sorprenderá de lo rápido que se carga su aplicación, (3) es la forma en que lo hace el navegador / industria : navegadores predeterminado a falso, y de todos modos la 'industria' no siempre es correcta ni sigue las mejores prácticas (solo mire flexbox)
PieBie
navegadores predeterminados a falso ¿Qué? Claramente no sabes de qué estás hablando. Cuando especifica font-family:Arial; font-weight:bold;(que, de nuevo, es la forma correcta de hacerlo, independientemente de si es Arial o Raleway), ¿cree que el navegador está aplicando una falsa negrita a una fuente de fuente Arial normal? Incorrecto. El navegador está cargando la fuente ArialBold como lo define el sistema y solo si no hay una fuente exacta disponible , aplicará un estilo falso a la fuente que mejor coincida en función del nombre de la familia de fuentes, ¡por eso deben ser las mismas! No puedo decir "Haz esto por Arial, pero no por Raleway".
rgthree
0

Aquí está la cosa, si hace la pregunta sobre Raleway, una fuente web programada para CSS, ambas maneras funcionan igual de bien. En este caso, use font-weight porque es el curso de acción "correcto" que será más fácil de cambiar y controlar sin cambios importantes en el código.

Ahora comienza a tener problemas una vez que incrusta una fuente usted mismo, una fuente que no está necesariamente planificada para CSS y que los pesos pueden no coincidir con los números.

Debido a esto, un error muy común en las fuentes incrustadas, extremadamente común en las fuentes que no están en inglés, es que css "carga" o "aligera" la fuente automáticamente y el resultado es muy malo.

Por lo tanto, le recomiendo que si usa una fuente web como las fuentes en las fuentes de Google, siga adelante y use los números en font-weight, pero cuando incruste una fuente usted mismo, permanezca seguro y use font-family para cada peso por separado .

Naty
fuente