Пользовательский шрифт отображается weird

Question

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

Итак, мне нужно использовать на веб-сайте клиента точный шрифт, который использует VOGUE. Поэтому я взял .eot & .ttf и загрузил их на свой сервер. Затем я добавил определения CSS:

/*fonts fonts for IE*/ 
@font-face { 
    font-family: VogueDidot; 
    src: url('font/FBDidotL-Regular.eot') format('embedded-opentype'); 
    font-weight: normal; 
    font-style: normal; 
} 

@font-face { 
    font-family: "VogueDidot Light"; 
    src: url('font/FBDidotL-Light.eot') format('embedded-opentype'); 
    font-weight: normal; 
    font-style: normal; 
} 

/*fonts for other browsers*/ 
@font-face { 
    font-family: VogueDidot; 
    src: url('font/FBDidotL-Regular.ttf') format('truetype'); 
    font-weight: normal; 
    font-style: normal; 
} 

@font-face { 
    font-family: "VogueDidot Light"; 
    src: url('font/FBDidotL-Light.ttf') format('truetype'); 
    font-weight: normal; 
    font-style: normal; 
} 

И в CSS для моего элемента:

.post h1 { 
    display: block; 
    height: 100%; 
    font-family: VogueDidot; 
    font-size: 55px; 
    text-transform: uppercase; 
    overflow: hidden; 
    line-height: 58px; 
} 

И, как обычно, я ожидал увидеть все работает как шарм.

Но это не ...

Вот как это должно выглядеть следующим образом:

https://lh.rs/8M9Q7EvRBapv

И вот моя версия:

https://lh.rs/Lbini5YbQZlX

Любые идеи?

Answer 1

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

Казалось бы, что ваша поддержка шрифтов довольно ограничена, так как вы только с помощью .ttf и .eot - для максимальной совместимости и ограничение визуализации проблем, лучше использовать «все» тип 5 шрифтов, которые:

• TTF (TrueType Font)
• часто (Adobe/Microsoft Open Font Type, AKA OpenType)
• СРВ (Embedded OpenType)
• Уофф (Web Open Font Format)
• SVG (Scalable Vector Graphics)

В идеале вы хотите использовать SVG столько, сколько сможете, поскольку это обеспечивает лучшее качество, SVG поддерживается в современных версиях браузера Andriod, Firefix, Safari, Opera, Chrome, но не в IE.

Лично я бы преобразовал шрифты во все эти типы файлов и посмотрел, улучшится ли результат, браузеры автоматически будут использовать предпочитаемый тип шрифта. Вы можете использовать Font 2 Web для преобразования в другие форматы, важно отметить, что шрифты защищены авторским правом, и ваш клиент потребует лицензирования, некоторые шрифты даже не позволяют использовать веб-страницы.