Schriftgröße

Wenn Sie jemals eine Textverarbeitung gemacht haben mit z.B.: Word, kennen Sie definitiv die Möglichkeit, fetten, kursiven und unterstrichenen Text zu verwenden. Beim Schreiben von CSS sind diese Eigenschaften auf mehrere Eigenschaften verteilt. Deshalb habe ich sie in einem einzigen Kapitel zusammengefasst.

Die Eigenschaft Schriftgröße

Die Eigenschaft font-weight definiert, wie fett Ihr Text ist, und es gibt viele mögliche Werte. normal, fett, fetter, heller, 100, 200, 300, 400, 500, 600, 700, 800, 900 und erben.

Werfen wir einen Blick auf den leicht verständlichen Teil - die numerische Skala bestehend aus den Zahlen 100-900. Diese Werte reichen von leicht (100) bis fett (900).

Hier ist eine grobe Anleitung, um die numerische Skala mit den gebräuchlichsten Gewichtsangaben abzugleichen:

• 100: Dünn, Haaransatz, Ultraleicht, Extraleicht
• 200: leicht
• 300: Buch
• 400: Regular, Normal, Plain, Roman, Standard
• 500: Medium
• 600: Semi-bold, Demi-bold
• 700: Fett
• 800: Heavy, Black, Extra-Fett
• 900: Ultra-black, Extra-black, Ultra-Fett, Heavy-black, Fat, Poster

Hier ein Beispiel: Ich habe Klassen verwendet, um die beiden Absätze unterschiedlich zu gestalten, aber Sie hätten auch den Inline-Stil verwenden können.

<style>
.weight200 {font-weight:200 }
.weight800 {font-weight:800 }
</style>
<p class="weight200">To travel is to live - H. C. Andersen </p>
<p class="weight800"> To travel is to live - H. C. Andersen </p>

Wie Sie sehen, gibt es einen Unterschied zwischen den beiden Sätzen. Sie sollten sich jedoch bewusst sein, dass die meisten Webfonts nicht mehr als zwei oder drei Gewichte haben und Gewichte wie "leicht" oder "halb fett" selten sind. Der Wert '400' ist normal und der Wert '700' ist fett.

Darüber hinaus werden die Schriftstärken in den meisten Browsern nicht korrekt dargestellt und es wird nur zwischen normal und fett unterschieden. Schauen Sie sich das folgende Beispiel an, und Sie können das Problem selbst sehen.

<p style="font-weight: 100;">To travel is to live - H. C. Andersen </p>
<p style="font-weight: 200;">To travel is to live - H. C. Andersen </p>
<p style="font-weight: 300;">To travel is to live - H. C. Andersen </p>
<p style="font-weight: 400;">To travel is to live - H. C. Andersen </p>
<p style="font-weight: 500;">To travel is to live - H. C. Andersen </p>
<p style="font-weight: 600;">To travel is to live - H. C. Andersen </p>
<p style="font-weight: 700;">To travel is to live - H. C. Andersen </p>
<p style="font-weight: 800;">To travel is to live - H. C. Andersen </p>
<p style="font-weight: 900;">To travel is to live - H. C. Andersen </p>

Wenn Sie die Möglichkeit haben möchten, mehr Strichstärken zu verwenden, sollten Sie einen Blick auf GoogleFonts werfen, da deren Schriftarten 3-4 verschiedene Gewichte enthalten.

Der Unterschied zwischen Schriftgröße: Fett und Schriftgröße: Fetter

Was ist der Unterschied zwischen Schriftgröße: fett und Schriftgröße: fett? Mit den Werten "Fett" und "Heller" werden Schriftstärken ausgewählt, die sich auf die geerbte (übergeordnete) Schriftstärke beziehen, wobei als "Fett" -Wert einfach die Schriftstärke in Fett geändert wird. Dies ist praktisch, wenn Sie eine Schriftfamilie mit drei oder mehr Wertigkeiten verwenden.

Im Folgenden finden Sie ein Beispiel, wie Sie den Wert "Fett" verwenden können, um Sätze visuell hervorzuheben. (Aber bevor Sie dies tun, werfen Sie bitte einen Blick auf meinen Artikel über die tags <em>, <strong>, <i>, und <b> mein HTML5 tutorial!)

<style>
p {font-weight: normal;}
.bolderText {font-weight:bolder;}
</style>
<p>For people could close their eyes to greatness, to horrors, to beauty, and their ears to melodies or deceiving words. <span class="bolderText">But they couldn't escape scent</span>.</p>
<p >And scent entered into their very core, went directly to their hearts, and decided for good and all between affection and contempt, disgust and lust, love and hate. </p>
<p><span class="bolderText">He who ruled scent ruled the hearts of men</span>.</p>

Wie Sie sehen, sind die mit der Klasse 'bolderText' hervorgehobenen Sätze tatsächlich fetter.