Kursiv überschreibt Standard?

Question

Ich versuche, verschiedene Formen der gleichen Schriftart in meinem Projekt zu deklarieren. Ich möchte eine normal und italic Version jeder Schriftart unter der gleichen BrandonText Namen. Sobald ich die italic Version in, die normal Version wird vollständig ignoriert.

@font-face { 
    font-family: 'BrandonText'; 
    src: url('/fonts/BrandonText-Thin.eot?#iefix') format('embedded-opentype'), 
      url('/fonts/BrandonText-Thin.otf') format('opentype'), 
      url('/fonts/BrandonText-Thin.woff') format('woff'), 
      url('/fonts/BrandonText-Thin.ttf') format('truetype'), 
      url('/fonts/BrandonText-Thin.svg#BrandonText-Thin') format('svg'); 
    font-weight: 100; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'BrandonText'; 
    src: url('/fonts/BrandonText-Thin.eot?#iefix') format('embedded-opentype'), 
      url('/fonts/BrandonText-Thin.otf') format('opentype'), 
      url('/fonts/BrandonText-Thin.woff') format('woff'), 
      url('/fonts/BrandonText-Thin.ttf') format('truetype'), 
      url('/fonts/BrandonText-Thin.svg#BrandonText-Thin') format('svg'); 
    font-weight: 100; 
    font-style: italic; 
} 

Warum ist das, und gibt es eine Möglichkeit, dies zu umgehen?

Answer 1

Sie überschreiben Ihre normalen @font-face durch kursive. Stattdessen deklarieren Sie es einfach einmal:

@font-face { 
    font-family: 'BrandonText'; 
    src: url('/fonts/BrandonText-Thin.eot?#iefix') format('embedded-opentype'), 
      url('/fonts/BrandonText-Thin.otf') format('opentype'), 
      url('/fonts/BrandonText-Thin.woff') format('woff'), 
      url('/fonts/BrandonText-Thin.ttf') format('truetype'), 
      url('/fonts/BrandonText-Thin.svg#BrandonText-Thin') format('svg'); 
    font-weight: 100; 
} 

Dann können Sie die gleiche Deklaration für beide Fälle verwenden. Wenn Sie kursiv schreiben möchten, fügen Sie einfach font-style: italic zu Element's CSS hinzu.

Answer 2

Beide sind mit dem gleichen Namen erklärt

Ihr zweites font-family ändern: 'BrandonText'; zur Schriftfamilie: 'BrandonTextItalic';

Answer 3

Sie haben beiden Schriftarten den gleichen Namen gegeben. Wechseln Sie dazu.

@font-face { 
    font-family: 'BrandonText'; 
    src: url('/fonts/BrandonText-Thin.eot?#iefix') format('embedded-opentype'), 
      url('/fonts/BrandonText-Thin.otf') format('opentype'), 
      url('/fonts/BrandonText-Thin.woff') format('woff'), 
      url('/fonts/BrandonText-Thin.ttf') format('truetype'), 
      url('/fonts/BrandonText-Thin.svg#BrandonText-Thin') format('svg'); 
    font-weight: 100; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'BrandonTextItalic'; 
    src: url('/fonts/BrandonText-Thin.eot?#iefix') format('embedded-opentype'), 
      url('/fonts/BrandonText-Thin.otf') format('opentype'), 
      url('/fonts/BrandonText-Thin.woff') format('woff'), 
      url('/fonts/BrandonText-Thin.ttf') format('truetype'), 
      url('/fonts/BrandonText-Thin.svg#BrandonText-Thin') format('svg'); 
    font-weight: 100; 
    font-style: italic; 
}