iOS 7 Safari заставляет жирные кнопки

Question

iOS 7 Safari заставляет жирные кнопки

0

У меня есть кнопка со следующими HTML и CSS:

<button type="button" class="wrapper">
    <p class="text">Preferences</p>
</button>


.wrapper {
    height: 80px;
    top: 0px;
    line-height: 80px;
    position: absolute;
    left: 34px;
}

.text {
    display: inline-block;
    margin: auto 0 auto 0;
    padding: 0 21px 0 20px;
    font-size: 26px!important;
    vertical-align: middle;
    line-height: 32px!important;
    font-weight: 500!important;
    text-align:justify;
}

В каждом браузере он отображается корректно, за исключением iOS 7 Safari, где шрифт BOLD. Я предполагаю, что Apple переопределяет мой CSS и заставляет шрифт полужирным шрифтом. Есть ли способ сделать шрифт-вес "нормальным"

Justin Cloud 12 май 2014, в 21:08

Источник

0

вероятно, из-за пользовательского агента на этом устройстве. Вы нашли свойство агента пользователя, которое делает текст жирным? Это может быть другое свойство, чем font-weight. Я бы использовал для этого удаленный отладчик safari и точно увидел, какие свойства применяются к тексту.
WhiteboardDev 12 май 2014, в 18:54

Теги:

html

css

ios

safari

stylesheet

1 ответ

Ещё вопросы

вероятно, из-за пользовательского агента на этом устройстве. Вы нашли свойство агента пользователя, которое делает текст жирным? Это может быть другое свойство, чем font-weight. Я бы использовал для этого удаленный отладчик safari и точно увидел, какие свойства применяются к тексту.

ashique · Accepted Answer · 2014-05-12T17-55-00.000Z

Вы можете попробовать со следующей модификацией в .text:

font-size: 26px;
font-weight: 100;

Итак, я использовал font-weight: 500, в действительности font-weight: 400 - это «нормально». Похоже, что iOS Safari был чувствителен к этому и сделал кнопки жирным, но другой шрифт весом: 500 текст был сохранен как обычно.