Жирные шрифты выглядят странно на мобильном устройстве, если не масштабировать - PullRequest
Новая
       26

Жирные шрифты выглядят странно на мобильном устройстве, если не масштабировать

0 голосов
/ 21 сентября 2019

Все полужирные версии шрифтов выглядят странно на мобильном устройстве, я сделал шрифт огромным для целей тестирования, и из-за этого кажется, что шрифт «удваивается» над собой с небольшим смещением между ними.Если и когда я увеличиваю масштаб, чтобы посмотреть ближе к тексту, он «становится» нормальным - и отображается так, как должен отображаться (и отображается в браузере рабочего стола).

Экран печати без увеличения

Увеличенный экран печати

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

.title {
font-size: 30px;
font-family: "Open Sans Condensed", sans-serif;
font-weight: 500; /* same problem with 900 */
font-style: normal;
font-variant: normal;
color: #000;
text-align: center;
}

<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet" type="text/css">

<div class="title">
World wide shipping for flat rates!
</div>

Я пробовал разные мобильные браузеры, и все они показывают ту же проблему.Это происходит со ВСЕМИ шрифтами, когда они выделены жирным шрифтом, а не только с тем, который я использую в этом примере.

1 Ответ

0 голосов
/ 23 сентября 2019 

    <style type="text/css">
        .title {
            font-size: 30px;
            font-family: 'Open Sans Condensed', sans-serif;
            font-weight: 900;
            font-style: normal;
            font-variant: normal;
            color: #000;
            text-align: center;
        }
<div class="title">World wide shipping for flat rates!</div>
...