вариант шрифта: капитель работает нормально на IE и Firefox, выглядит расплывчатым на Safari, Opera и Chrome

Question

Текст на моей странице выглядят размытыми на Safari, Opera и Chrome: http://testowa.portalo.pl/wiadomosci.php

Я использую такой CSS:

.tytulmalykom { 
    color:#666666; 
    font-size:11px; 
    font-variant:small-caps; 
} 

Это нормально работает в Firefox и Internet Explorer. Есть ли альтернативы?

Answer 1

В большинстве шрифтов отсутствует шрифт с маленькими крышками, поэтому font-variant:small-caps позволяет создавать фальшивые маленькие шапки. Они делают это путем преобразования в верхний регистр и уменьшения размера шрифта. Результаты варьируются от допустимого до ужасного, в зависимости от шрифта, браузера, устройства отображения и других факторов. Среди прочего, различные браузеры применяют различные сокращения размера здесь.

Таким образом, вы получите более последовательные результаты, выполнив преобразование случая и уменьшите размер шрифта самостоятельно. Он становится неуклюжим, если текст смешанный, потому что, чтобы «Foo» отображался в маленьких шапках, сохраняя различие в случае, вам нужно использовать F<span class="sc">oo</span> (и установить text-transform: uppercase и font-size: ... на .sc). И результат не будет типографически хорошим; для этого вам нужен типографский шрифт с маленькими шапками. Но по крайней мере у вас есть шансы получить одинаковое ограничение размера шрифта в разных браузерах. (Это не гарантируется, так как существуют небольшие различия в применении размеров шрифтов.)