Font css html: font — CSS: Cascading Style Sheets

css — html не учитывает набор шрифтов в стиле

спросил 1 год, 4 месяца назад

Изменено 1 год, 4 месяца назад

Просмотрено 342 раза

Я сократил свою проблему до тривиального примера:

 

<голова>
    <метакодировка="utf-8" />
    <стиль>
        тело,
        ч2,
        h3,
        h4,
        h5,
        h5 {
            семейство шрифтов: 'Times New Roman', без засечек
        }
        тело {
            размер шрифта: 16px;
            семейство шрифтов: без засечек;
        }
    

<тело>
     простой текст w 
     
 простой текст h2 w 
 
     
 простой текст h3 w 
 

 

Который, как я ожидаю, создаст три строки текста без засечек . Веб-инспектор указывает, что все три строки должны быть

без засечек .

Протестировано на Chromium и Firefox, я получаю три строки текста, одну без засечек и еще две, для h2 и h3 шрифтом с засечками:

Чем объясняется такое поведение? Каково мое непонимание того, как внешний вид шрифта наследуются и применяются?

• html
• css
• наследование
• семейство шрифтов

2

Поскольку вы объявили Times New Roman для обоих элементов, h2 и h3 , они оба отображаются с этим шрифтом.

И поскольку последнее определение в CSS имеет более высокий порядок, чем первое, элементы и наследуют стиль, установленный для селектора body , а именно: без засечек .

Это не проблема, это ожидаемо.

---

Если вы поместите элемент внутрь (например)

, вы увидите, что он унаследует стили от своего родителя и будет отображаться как также с засечками

Times New Roman .

 

<голова>
    <метакодировка="utf-8" />
    <стиль>
        тело,
        ч2,
        h3,
        h4,
        h5,
        h5 {
            семейство шрифтов: 'Times New Roman', без засечек
        }
        тело {
            размер шрифта: 16px;
            семейство шрифтов: без засечек;
        }
    

<тело>
     простой текст w 
     
 простой текст h2 w 
 
     
 простой текст h3 w 
 
    

        
 простой текст w 
    

 

5

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания и подтверждаете, что прочитали и поняли нашу политику конфиденциальности и кодекс поведения.

Как сделать текст HTML менее размытым с помощью сглаживания шрифтов CSS

Итак, что нам нужно сделать, это войти в наше приложение и перейти в main.scss . Теперь прокрутите примерно до строки 15, где у нас есть body, и прямо под этими начальными значениями, такими как семейство шрифтов, color. Давайте введем значение -webkit-font-smoothing , и мы хотим установить для этого сглаживание .

main.scss

 тело {
    семейство шрифтов: "Open Sans";
    цвет: #808080;
    -webkit-font-smoothing: сглаживание;
}
 

Сохраните это, зайдите в приложение, и вы увидите, что оно изменилось, оно выглядит немного иначе.

Вот как вы это делаете. Теперь давайте добавим еще несколько, которые вы на самом деле не заметите, но они повлияют на вещи в разных браузерах, и это заставит их работать в разных браузерах, таких как Firefox. Допустим, -moz-osx-font-smoothing и, скажем, оттенки серого, а затем, скажем, рендеринг текста и, скажем, оптимизация разборчивости.

Итак, вы увидите, что это указывает на то, что пользовательский агент должен делать упор на удобочитаемость, а не на скорость рендеринга и геометрическую точность.

Таким образом, это в основном улучшит внешний вид, и мы скажем -webkit-tap-highlight-color, и мы установим его прозрачным.

main.scss

 тело {
    семейство шрифтов: "Open Sans";
    цвет: #808080;
    -webkit-font-smoothing: сглаживание;
    -moz-osx-font-smoothing: оттенки серого;
    рендеринг текста: оптимизация разборчивости;
    -webkit-tap-highlight-color: прозрачный;
}
 

Итак, у нас все хорошо. Давайте перейдем к приложению, и вы увидите, что оно немного отличается, вы увидите, что теперь оно намного лучше, на самом деле оно выглядит почти лучше, чем дизайн.

Итак, если вы хотите проверить это, просто закомментируйте эти строки, а затем сохраните их, а затем очень быстро перейдите в Chrome, и вы увидите изменение, а затем посмотрите назад и вперед, вы увидите, что это выглядит снова плохо, но когда у нас есть эти линии, они выглядят очень чистыми и гладкими.