Проблема веса шрифта на устройствах iOS

Question

Проблема веса шрифта на устройствах iOS

1

У меня есть шрифт Helvetica Light для HTML-страниц, используемых в приложении Android и iOS. Проблема в том, когда я даю font-weight: bold в заголовках, он отлично работает на Android, но не на устройствах iOS.

Вот font-face:

@font-face {
font-family: 'HelveticaLight';
src: url('./fonts/helveticalight.eot');
src: url('./fonts/helveticalight.eot') format('embedded-opentype'),
     url('./fonts/helveticalight.woff2') format('woff2'),
     url('./fonts/helveticalight.woff') format('woff'),
     url('./fonts/helveticalight.ttf') format('truetype'),
     url('./fonts/helveticalight.svg#helveticalight') format('svg');
}

piyushbalouria 21 июль 2017, в 08:12

Источник

1

почему вы не используете жирный шрифт helvetica вместо светлого шрифта для жирных шрифтов?
Sunil Kumar 21 июль 2017, в 05:44

Теги:

html

css

ios

fonts

3 ответа

Ещё вопросы

почему вы не используете жирный шрифт helvetica вместо светлого шрифта для жирных шрифтов?

RoelN · Answer 1 · 2017-07-21T06-22-00.000Z

Проблема в том, что вы не загружаете смелую версию Helvetica - вы только загружаете Helvetica Light. Если нужная жирная версия отсутствует, как и в вашем случае, большинство ОС или браузеров создадут фальшивую жирную версию, сделав тонкий шрифт "более толстым" (aka faux bold). Но iOS не будет: он будет придерживаться исходного шрифта, который вы запросили: Helvetica Light.

Решение состоит в том, чтобы включить правило @font-face где вы загружаете Helvetica Bold.

в случае, если я использую тег <strong>, это также не работает на устройствах IOS.
«в случае, если я использую тег <strong>, это тоже не работает» - ну, действительно, это не будет по тем же причинам :)
работает ли сильный тег на таких тегах, как h3, h4 ??
«Действительно ли сильный тег работает на h-тегах, таких как h3, h4 ??» - да, но это не имеет ничего общего с вашей первоначальной проблемой.
Это правильный ответ на мою проблему. Я встроил шрифт из Google, и мало что я знал, что вам нужно настроить URL-адрес для вставки, чтобы вы могли также включить жирный шрифт. Спасибо.

kravisingh · Answer 2 · 2017-07-21T04-01-00.000Z

0

Вы можете попробовать следующее:

body{  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

kravisingh 21 июль 2017, в 04:01

0

@piyushbalouria, если работает, то прими ответ.
kravisingh 21 июль 2017, в 06:05
0

позвольте мне попробовать это
piyushbalouria 21 июль 2017, в 06:09
0

Это повлияет на рендеринг, но не исправит исходную проблему: жирный шрифт не загружается.
RoelN 21 июль 2017, в 08:39
0

Тогда давайте попробуем уменьшить размер шрифта на 1 1px Если все так же, используйте шрифт helvetica bold.
kravisingh 21 июль 2017, в 11:06
0

В любом случае, спасибо, что использовал свойство -webkit-text-stroke для решения проблемы жирного шрифта в IOS.
piyushbalouria 24 июль 2017, в 13:38

Показать ещё 3 комментария

sudhanshum · Answer 3 · 2017-07-21T03-29-00.000Z

Попробуйте этот пример; .textweight{ font-family: sans-serif; font-weight: 800; }