Web - шрифт Arial отображается по-разному на нескольких устройствах

Question

На моем веб-сайте по какой-то причине шрифт Arial отображается по-разному на нескольких устройствах.

Это было нормально, и жалобы начали появляться примерно месяц назад, и я подозреваю, что основная причина - где-то локально (браузер или ОС). Все проблемные пользователи сидят в разных версиях Windows и в основном используют Chrome (но не все).

Пытался исследовать этот вопрос, но не нашел что-то общее.

Неужели кто-нибудь сталкивался с такой проблемой уже?

Код:

<h1 style="font-family: Arial;">Title</h1> 

Answer 1

Я предлагаю вам поставить свой файл шрифтов в каталоге веб-сайта и установить путь из каталога. (несколько раз, возможно, что устройство не имеет шрифт.)

в верхней части файла CSS:

@font-face { 
    font-family: "BYekan"; 
    src: url("../font/BYekan.eot?#") format("eot"), url("../font/BYekan.woff") format("woff"), url("../font/BYekan.ttf") format("truetype"); 
} 

использовать:

body{ 
    font-family: "BYekan"; 
} 

Answer 2

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

Вместо этого создайте дизайн, который имеет дело с проблемой визуализации шрифтов элегантно.

Answer 3

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

Без явного правила @font-face и реальных источников шрифтов вы сообщаете браузеру, что вам все равно, что он загружает, до тех пор, пока загружаемый шрифт соответствует примерно тому, что вы просите. Если вы попросите «Arial», браузер попросит ОС о шрифте, который, как утверждается, находится в семействе Arial, и на разных устройствах (или, точнее, будет) будут установлены разные версии Arial. Таким образом, ваш контент будет выглядеть по-разному для разных устройств.

Однако, и что-то очень много забывают, не имеет значения, если это так. Важно то, что контент вашего сайта выглядит последовательным. Люди не собираются смотреть на ваш сайт на двух компьютерах одновременно, а затем замечают, что они не выглядят идентичными пикселам. Отдельные пользователи будут просматривать ваш контент на одном устройстве за раз. Итак: есть ли внешний вид на одном устройстве? Потрясающе! Ты справился. Какая версия Arial фактически используется, в этом случае не имеет значения.