Wie ändere ich die Schriftfamilie eines Elements ?

Question

Das ist meine einzige CSS

@font-face { 
    font-family: 'thefont'; 
    src: url('fonts/the-font.otf'); 
    font-style: normal; 
} 

body { 
    font-family: 'thefont'; 
} 

Wenn ich einen <button>Hi</button> die Schriftart tun endet -apple-system zu sein.

Wenn ich die Schriftart button zuweisen, wird die Schriftart angezeigt.

Weiß jemand, warum es den Körper und alles darin nicht beeinflußt?

Answer 1

Neben der Info unten, Ihre eigene Schriftart, um sicherzustellen, wird für die Schaltfläche berücksichtigt werden, müssen Sie

button { 
    font-family : inherit; 
    font-size: 1em; 
} 

auf alle Tastenelemente anzuwenden.

können Sie prüfen, wie sie es dort tun:

http://purecss.io/buttons/

oder dort:

http://getbootstrap.com/css/#buttons

außerdem sicher, dass Ihre Schrift in verschiedenen Formaten exportiert wird, so dass es unterstützt von allen Plattformen.

Sie können FontSquirrel Generator verwenden, um Ihre Schriftart in alle Formate zu exportieren.

Ihre CSS sollte ein bisschen so aussehen:

@font-face { 
    font-family: 'thefont'; 
    src: url('the-font.eot'); /* IE9 Compat Modes */ 
    src: url('the-font.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
     url('the-font.woff2') format('woff2'), /* Super Modern Browsers */ 
     url('the-font.woff') format('woff'), /* Pretty Modern Browsers */ 
     url('the-font.ttf') format('truetype'), /* Safari, Android, iOS */ 
     url('the-font.svg#svgFontName') format('svg'); /* Legacy iOS */ 
}