konfiguriert Schrift mit Varianten

Question

Ist es möglich, ein donwloadable TTF Schriftart zu konfigurieren, um die gleiche Art und Weise als ein Systemschriftart verhalten, das heißt:

• Schriftfamilie in mehreren Dateien gespeichert:

  • foo.ttf
  • foob.ttf
  • fooi.ttf

• Font mit dem generischen Namen zugewiesen:

  p{ 
      font-family: Foo, serif; 
  } 
  

• Browser die entsprechende Variante wählt automatisch:

  p.warning{ 
      font-weight: bold; 
  } 
  p.note{ 
      font-style: italic; 
  } 
  

Die Dokumentation ich geblättert habe schlägt vor, dass Sie konfigurieren müssen jede Variante als eine ganz andere Schriftart:

@font-face{ 
    font-family: FooRegular; 
    src: url(foo.ttf); 
    font-weight: normal; 
    font-style: normal; 
} 
@font-face{ 
    font-family: FooBold; 
    src: url(foob.ttf); 
    font-weight: bold; 
    font-style: normal; 
} 
@font-face{ 
    font-family: FooItalic; 
    src: url(fooi.ttf); 
    font-weight: normal; 
    font-style: italic; 
} 
p{ 
    font-family: FooRegular, serif; 
} 
p.warning{ 
    font-family: FooBold, serif; 
    font-weight: bold; 
} 
p.note{ 
    font-family: FooItalic, serif; 
    font-style: italic; 
} 

Ist es so, oder suche ich nur veraltete/unvollständige Dokumente?

@font-face{ 
    font-family: Foo; 
    src: url(foo.ttf); 
    font-weight: normal; 
    font-style: normal; 
} 
@font-face{ 
    font-family: Foo; 
    src: url(foob.ttf); 
    font-weight: bold; 
    font-style: normal; 
} 
@font-face{ 
    font-family: Foo; 
    src: url('fooi.ttf'); 
    font-weight: normal; 
    font-style: italic; 
} 
p{ 
    font-family: Foo; 
} 
p.warning{ 
    font-family: FooBold, serif; 
    font-weight: bold; 
} 
p.note{ 
    font-family: FooBold, serif; 
    font-style: italic; 
} 

Auf diese Weise fügen Sie die Stile der gleichen Schriftfamilie:

Answer 1

Die Tatsache, viele Tutorials zu ignorieren ist, dass man einfach einen einzelnen Familiennamen verwenden können und es allen Regeln zuweisen:

@font-face{ 
    font-family: Foo; /* Just one name */ 
    src: url(foo.ttf); 
    font-weight: normal; 
    font-style: normal; 
} 
@font-face{ 
    font-family: Foo; /* Just one name */ 
    src: url(foob.ttf); 
    font-weight: bold; 
    font-style: normal; 
} 
@font-face{ 
    font-family: Foo; /* Just one name */ 
    src: url(fooi.ttf); 
    font-weight: normal; 
    font-style: italic; 
} 

... also alle CSS Sie brauchen, ist:

p{ 
    font-family: Foo, serif; 
       /* ^^^ */ 
} 
p.warning{ 
    font-weight: bold; 
} 
p.note{ 
    font-style: italic; 
} 

Kredit für die Info geht

Answer 2

Es sollte so etwas wie dieses.