Редактор шрифтов HTML/CSS Webkit в webkit

Question

Так что теперь я очень расстроен. Вы, конечно же, знаете Google Chrome со своими проблемами визуализации шрифтов. Так что я сейчас перепроектирую свой сайт, а также добавил современный вид шрифта с @ font-face, но в webkit (сафари и хром) он выглядит просто ужасно. Одно письмо выглядит очень резким, другое размыто и т. Д. Я пробовал это с помощью функции антивирусной проверки webkit в css, но это, похоже, не работает. Я читал, что Google отключил это. Во всяком случае, я также пробовал его с помощью трюков с текстом-shaddow и text-stroke, который работал немного, но выглядит не очень хорошо. Я видел другие сайты с тем же шрифтом, и там он выглядел фантастически. Так как же им это удалось? Есть ли еще одна возможность решить эту проблему?

Спасибо.

Answer 1

http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css

К нижней части этой статьи, она предполагает применение CSS ниже для сглаживания переходов.

.cube { 
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    -ms-backface-visibility: hidden; 
    backface-visibility: hidden; 

    -webkit-perspective: 1000; 
    -moz-perspective: 1000; 
    -ms-perspective: 1000; 
    perspective: 1000; 
} 

Это заставляет браузер использовать ваш графический процессор для визуализации CSS. Побочным продуктом этого для меня были более плавные шрифты - согласованный кросс-браузер и независимо от применяемых преобразований. Может быть, кто-то может позвонить, почему это сработало !? Хотя я не уверен, я думаю, что это может помочь.

Это сайт, на котором я его пробовал, только для Chrome.

Черные ящики под четырьмя серыми пузырьками имеют текст, который показывает чрезвычайно резкое непоследовательность в зависимости от браузера при переходе без применения вышеуказанного CSS.

Answer 2

Чтобы избежать проблем с отображением шрифтов в Chrome, попробуйте this solution by Icomoon. Он предлагает загрузить шрифт SVG вместо WOFF для Chrome. Шрифт SVG будет корректно отображаться в Chrome/Windows, и единственным недостатком является больший размер файла шрифта SVG.

Загрузите шрифт для Chrome только путем добавления этого CSS:

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    @font-face { 
     font-family: 'icomoon'; 
     src: url('fonts/icomoon.svg#icomoon') format('svg'); 
    } 
}