Проблема с размытым шрифтом в iPad Safari

Я использую @font-face для загрузки веб-шрифтов, которые загружаются правильно:

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

font-weight: normal;
font-style: normal;
font-variant:normal;

}

У меня также есть еще один класс для стилизации и выделения текста жирным шрифтом:

.BusinessLeftHeader{
    font-family: HelveticaNeueLight;
    font-size: 32px;
    padding: 30px 0 5px;
    text-align: center;
    line-height: 1;
    font-variant: normal;    
}

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

Я также использую этот код для решения этой проблемы.

-moz-font-smoothing: none;
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;

Но опять же, все еще возникает та же проблема. Текст выглядит не очень хорошо на iPad 2. Когда я увеличиваю масштаб, он выглядит нормально.


css font-face ipad-2
person Saeed Afzal    schedule 03.03.2014    source источник
comment
попробуйте задать своим контейнерам четную ширину и высоту, например, если ширина равна 423 пикселя, сделайте ее 424 пикселя.   -  person richa_pandey    schedule 03.03.2014

Ответы (1)


arrow_upward
3
arrow_downward

Здесь есть несколько соображений, во-первых, у вас конфликтующие настройки стиля:

-moz-font-smoothing: none;
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;

Все они должны быть установлены либо на antialiased, либо на none.

Вы также заявляете, что хотите иметь жирный шрифт, однако вы не установили стиль font-weight и используете шрифт под названием HelveticaNeueLight, который, как я полагаю, по самому его названию не является жирным и не включает полужирную версию. По крайней мере, вам нужно будет установить:

font-weight:bold

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

person SW4    schedule 03.03.2014