Wie ändere ich die font-family einer <button> - element?

Dies ist meine einzige CSS -

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

body {
    font-family: 'thefont';
}

Wenn ich eine <button>Hi</button> die Schrift endet als -apple-system.

Wenn ich tatsächlich weisen Sie die schriftart button ist, wird die schriftart angezeigt.

Weiß jemand, warum es nicht auf den Körper und überhaupt alles drin?

InformationsquelleAutor bryan | 2016-10-20

  1. 6

    Neben der info unten, um sicherzustellen, dass Ihre benutzerdefinierte schriftart berücksichtigt für den button,, bewerben Sie sich

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

    alle button-Elemente.

    Können Sie überprüfen, wie Sie es tun es:

    http://purecss.io/buttons/

    oder dort:

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

    Stellen Sie außerdem sicher, dass die schriftart exportiert in verschiedene Formate, so dass es unterstützt alle Plattformen.

    Können Sie FontSquirrel-Generator exportieren Sie Ihre schriftart in allen Formaten.

    Ihre CSS sollten sehen ein bisschen aus wie:

    @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 */
}
    Dank george, was für einen dummen Fehler. Ich werde markieren Sie diese Antwort, wenn es lassen Sie uns Sie mich.
    es gibt keine dumme Fehler 🙂
    Aus irgendeinem Grund funktioniert es immer noch nicht in die Taste, gibt es irgendwelche tests, die ich tun kann, um sicherzustellen, dass ist das Problem? Es funktioniert auf <a> aber nicht in <button>. Wenn ich body * { font-family: 'font'; } es funktioniert, aber es scheint hacky
    so, button { font-family: 'thefont', sans-serif; } funktioniert nicht? Können Sie überprüfen Sie den computer CSS-Eigenschaften auf Dev-Tools und sehen, was angewendet wird/und warum?
    Es ist die Anwendung der user-agent-Stil aus irgendeinem Grund. Auch wenn ich ändern Sie es zu einem regulären web-schriftart nicht ändern.

    InformationsquelleAutor George Katsanos

Schreibe einen Kommentar