Блог

Главная - Вопросы по программированию - Как мне изменить семейство шрифтов элемента ?

Как мне изменить семейство шрифтов элемента ?

#html #css #fonts

#HTML #css #шрифты

Вопрос:

Это мой единственный CSS

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

body {
    font-family: 'thefont';
}

Когда я выполняю a, <button>Hi</button> шрифт становится -apple-system .

Если я действительно назначу шрифт button , это заставит шрифт отображаться.

Кто-нибудь знает, почему это не влияет на тело и все, что внутри него?

Ответ №1:

В дополнение к приведенной ниже информации, чтобы убедиться, что ваш пользовательский шрифт учитывается для кнопки, вам необходимо применить

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

для всех элементов button.

Вы можете проверить, как они это делают там:

http://purecss.io/buttons/

или там:

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

Также убедитесь, что ваш шрифт экспортирован в несколько разных форматов, чтобы он поддерживался всеми платформами.

Вы можете использовать FontSquirrel Generator для экспорта вашего шрифта во все форматы.

Ваш CSS должен выглядеть примерно так:

 @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 */
}

Комментарии:

1. Спасибо, Джордж, какая глупая ошибка. Я отмечу этот ответ, когда он позволит мне.

2. По какой-то причине он все еще не работает внутри кнопки, могу ли я провести какие-либо тесты, чтобы убедиться, что проблема именно в этом? Он работает над <a> , но не в <button> . Если я это сделаю body * { font-family: 'font'; } , это сработает, но это кажется хакерским

3. итак, button { семейство шрифтов: ‘thefont’, без засечек; } не работает? Можете ли вы проверить свойства компьютерного CSS в Dev Tools и посмотреть, что применяется / и почему?

4. По какой-то причине применяется стиль user agent. Даже если я изменю его на обычный веб-шрифт, он не изменится.