Was @ font-face wirklich ist

Nachdem ich eine unangemessene Verwendung von Schriftarten im Code meiner Kollegen gesehen habe:

font-weight: normal;
font-family: BrutalType-Bold, sans-serif;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Mir wurde klar, dass im dänischen Königreich etwas nicht stimmte. Höchstwahrscheinlich wird ein Artikel nicht alles abdecken, aber fangen wir einfach an.

Angenommen, Sie werden 2021 eine Schriftart verbinden. Nachdem wir gelesen hatten, wie schlecht (tatsächlich nicht) alles mit dem Google Fonts-Dienst ist, haben wir beschlossen, ihn lokal zu verbinden. Kaufte (natürlich) ein Schriftpaket, packte es aus und sah Folgendes:

, . , ( ). – @font-face.

CSS : (font-family), (, font-weight), (font-style), (, font-stretch), (font-variant) (, font-size). 

: @font-face , , CSS .

, , : normal, italic oblique. italic oblique . , italic – , , ( ), oblique – , . .

, : normal italic. Italic It – "", italic (MyriadPro-BoldSemiCnIt.otf, MyriadPro-It.otf). Oblique Ob (Obl), - .

. CSS 100 900 : normal (400), bold (700). bolder lighter, @font-face !

: Light (100, MyriadPro-Light.otf), Book (300), Regular (400, MyriadPro-Regular.otf), Medium (500), Semibold (600), Bold (700, MyriadPro-Bold.otf), Black (Solid, 900, MyriadPro-BlackCond.otf). Black , . , .

– font-stretch, . -, . - : ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, ultra-expanded ( ). 

, : Cond, Cn – condensed (, MyriadPro-Cond.otf, MyriadPro-LightCond.otf), SemiCond, SemiCn – semi-condensed (, MyriadPro-SemiCn.otf), SemiExt – semi-extended (, MyriadPro-SemiExtIt.otf) .

font-variant, : normal small-caps ( ). , .

. (woff2 opentype/otf):

@font-face {
 font-family: MyriadPro;
 src: url(MyriadPro-Regular.woff2) format(woff2),
      url(MyriadPro-Regular.otf) format(opentype);
 font-weight: 400;
 font-style: normal;
 font-stretch: normal;
 font-variant: normal;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

- :

@font-face {
 font-family: MyriadPro;
 src: url(MyriadPro-BlackSemiExtIt.woff2) format(woff2),
      url(MyriadPro-BlackSemiExtIt.otf) format(opentype);
 font-weight: 900;
 font-style: italic;
 font-stretch: semi-extended;
 font-variant: normal;
}

@font-face {
 font-family: MyriadPro;
 src: url(MyriadPro-BlackSemiCn.woff2) format(woff2),
      url(MyriadPro-BlackSemiCn.otf) format(opentype);
 font-weight: 900;
 font-style: normal;
 font-stretch: semi-condensed;
 font-variant: normal;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, . ! , "MyBestSiteDuckingFontEver".

:

.ex-heart {
 font-family: MyriadPro, sans-serif;
 font-weight: 900;
 font-stretch: semi-extended;
 font-style: italic;
}

.ex-soul {
 font-family: MyriadPro, sans-serif;
 font-weight: 900;
 font-stretch: semi-condensed;
 font-style: normal;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

MyriadPro-BlackSemiExtIt.woff2 ( otf, ), – MyriadPro-BlackSemiCn.woff2. , , MyriadPro-Regular.woff2. : , . Chrome. 

Wenn die reguläre Datei nicht gefunden wird, wird die serifenlose Systemschrift verwendet. Es lohnt sich, einen separaten Artikel über die Reihenfolge der Auswahl lokaler Schriftarten zu schreiben.

Ich hoffe, ich habe es geschafft, die Grundlagen der Arbeit mit Schriftsammlungen zu erklären, und Sie werden keinen Code mehr wie meine Kollegen schreiben. Es bleibt ihnen dies zu erklären.