Fonts einbinden
bearbeitet von Gunnar Bittersmann@@heinetz
> > Lato Light und `font-weight: normal` passt nicht so recht zusammen. Der Light-Schnitt ist `font-weight: 300`.
> >
>
> Hmmmm. Unter:
> http://www.latofonts.com/2014/02/27/lato-2-0-released/
>
> ... wird die Schrift auch mit font-weight: normal eingebunden. Ich habe das so verstanden, dass der Schnitt aus dem font kommt.
Sicher kann man eine Schriftfamilie auch so einbinden:
~~~CSS, bad
@font-face
{
font-family: Lato Light;
font-weight: normal;
font-style: normal;
src: url(/fonts/LatoLatin-Light.woff2);
}
@font-face
{
font-family: Lato Light Italic;
font-weight: normal;
font-style: normal;
src: url(/fonts/LatoLatin-LightItalic.woff2);
}
@font-face
{
font-family: Lato Heavy;
font-weight: normal;
font-style: normal;
src: url(/fonts/LatoLatin-Heavy.woff2);
}
:root
{
font-family: Lato Light, sans-serif;
font-weight: normal;
font-style: normal;
}
em, i
{
font-family: Lato Light Italic, sans-serif;
font-weight: normal;
font-style: normal;
}
strong, b, h1, h2, h3, h4, h5, h6, th
{
font-family: Lato Heavy, sans-serif;
font-weight: normal;
font-style: normal;
}
~~~
Nur ist das unsinnig. Wenn die Schriftdateien nicht geladen werden, ist nichts kursiv und nichts fett.
So sollte man’s machen:
~~~CSS, good
@font-face
{
font-family: Lato;
font-weight: 300;
font-style: normal;
src: url(/fonts/LatoLatin-Light.woff2);
}
@font-face
{
font-family: Lato;
font-weight: 300;
font-style: italic;
src: url(/fonts/LatoLatin-LightItalic.woff2);
}
@font-face
{
font-family: Lato;
font-weight: 800;
font-style: normal;
src: url(/fonts/LatoLatin-Heavy.woff2);
}
:root
{
font-family: Lato, sans-serif;
font-weight: 300;
}
strong, b, h1, h2, h3, h4, h5, h6, th
{
font-weight: 800;
}
~~~
Eine Schriftfamilie – ein Name. Und `font-weight` und `font-style` in den `@font-face`-Regeln jeweils richtig angeben.
LLAP 🖖
--
*„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“* —Kurt Weidemann
Fonts einbinden
bearbeitet von Gunnar Bittersmann@@heinetz
> > Lato Light und `font-weight: normal` passt nicht so recht zusammen. Der Light-Schnitt ist `font-weight: 300`.
> >
>
> Hmmmm. Unter:
> http://www.latofonts.com/2014/02/27/lato-2-0-released/
>
> ... wird die Schrift auch mit font-weight: normal eingebunden. Ich habe das so verstanden, dass der Schnitt aus dem font kommt.
Sicher kann man eine Schriftfamilie auch so einbinden:
~~~CSS, bad
@font-face
{
font-family: Lato Light;
font-weight: normal;
font-style: normal;
src: url(/fonts/LatoLatin-Light.woff2);
}
@font-face
{
font-family: Lato Light Italic;
font-weight: normal;
font-style: normal;
src: url(/fonts/LatoLatin-LightItalic.woff2);
}
@font-face
{
font-family: Lato Heavy;
font-weight: normal;
font-style: normal;
src: url(/fonts/LatoLatin-Heavy.woff2);
}
:root
{
font-family: Lato Light;
font-weight: normal;
font-style: normal;
}
em, i
{
font-family: Lato Light Italic;
font-weight: normal;
font-style: normal;
}
strong, b, h1, h2, h3, h4, h5, h6, th
{
font-family: Lato Heavy;
font-weight: normal;
font-style: normal;
}
~~~
Nur ist das unsinnig. Wenn die Schriftdateien nicht geladen werden, ist nichts kursiv und nichts fett.
So sollte man’s machen:
~~~CSS, good
@font-face
{
font-family: Lato;
font-weight: 300;
font-style: normal;
src: url(/fonts/LatoLatin-Light.woff2);
}
@font-face
{
font-family: Lato;
font-weight: 300;
font-style: italic;
src: url(/fonts/LatoLatin-LightItalic.woff2);
}
@font-face
{
font-family: Lato;
font-weight: 800;
font-style: normal;
src: url(/fonts/LatoLatin-Heavy.woff2);
}
:root
{
font-family: Lato;
font-weight: 300;
}
strong, b, h1, h2, h3, h4, h5, h6, th
{
font-weight: 800;
}
~~~
Eine Schriftfamilie – ein Name. Und `font-weight` und `font-style` in den `@font-face`-Regeln jeweils richtig angeben.
LLAP 🖖
--
*„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“* —Kurt Weidemann