вариант шрифта: маленькие заглавные буквы;показывает разные размеры шрифта, используя Chrome или Firefox - PullRequest
Новая
       27

вариант шрифта: маленькие заглавные буквы;показывает разные размеры шрифта, используя Chrome или Firefox

8 голосов
/ 29 сентября 2011 
font-variant: small-caps;
font-size: 12px;

Firefox:

  • Прописные буквы: 12px
  • строчные буквы: 10px

Chrome:

  • Прописные буквы: 12px
  • строчные буквы: 8px

Как это согласовать, не используя JavaScript?

Ответы [ 3 ]

3 голосов
/ 16 октября 2013

Браузеры Webkit отображают заглавные буквы меньше, чем другие браузеры, поэтому ... Вы можете использовать медиазапросы CSS, чтобы легко выявлять браузеры Webkit, такие как Chrome и Safari.Попробуйте что-то вроде этого: 

@media screen and (-webkit-min-device-pixel-ratio:0) {
.some-element-using-small-caps {
    font-size: .85em 
 }
}
0 голосов
/ 10 апреля 2013

У меня похожая проблема с гораздо более странной проблемой между Safari на iPad и Safari на десктопах, показывающей другой масштаб для маленьких заглавных букв в 16px.По какой-то причине маленькие заглавные буквы на iPad больше по размеру, чем Firefox.

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

То, что я наблюдал для Firefox и IE, заключается в том, что шрифты имеют тенденцию масштабироваться с гораздо большимпромежуточные размеры, чем у Webkit.Например, в IE и Firefox 15.6px немного больше или используют больше трекинга для настройки, чем 15.5px, так же как 15.7px, 15.8px и т. Д. С разницей почти на каждый 0.1 пиксель.В то время как в Safari разница воспринимается только для каждых 0,4px или около того.

Для моего случая с маленькими заглавными буквами, который привел к проблеме переполнения, я использовал 15,5px, что практически не отличается от 16px в Safari (Desktop)Тем не менее, уменьшите размер маленьких заглавных букв для IE и Firefox как можно ближе к Safari.

0 голосов
/ 29 сентября 2011

Вы можете настроить таргетинг на браузеры индивидуально, используя такие хаки css: 

@-moz-document url-prefix() {
  //firefox specific css here
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  //chrome specific css here - this will also hit other webkit browsers like safari tho
}

Однако, на мой взгляд, более приятный способ заключается в том, что в нем присутствует небольшой кусочек javascript, который обнаруживает браузер и устанавливает класс для элемента html, а затем вы можете использовать этот класс в качестве основы для ориентации на отдельные браузеры.

в итоге это будет выглядеть примерно так: 

<html class="firefox">
...
</html>

.firefox .rulename {
  //firefox specific css here
}

и, конечно, то же самое для Chrome и любого другого браузера

...