font-variant: small-caps; shows different font sizes using Chrome or Firefox_问答_开发者

font-variant: small-caps; shows different font sizes using Chrome or Firefox

开发者 https://www.devze.com 2023-04-08 21:42 出处：网络

font-variant: smal开发者_如何学Pythonl-caps; font-size: 12px; Firefox: Capital letters: 12px Lowercase letters: 10px

font-variant: smal开发者_如何学Pythonl-caps;
font-size: 12px;

Firefox:

Capital letters: 12px
Lowercase letters: 10px

Chrome:

Capital letters: 12px
Lowercase letters: 8px

How to harmonize that without using JavaScript?

Webkit browsers display small-caps smaller than other browsers so.. You can use CSS media queries to easily sniff out webkit browsers like Chrome and Safari. Try something like this:

@media screen and (-webkit-min-device-pixel-ratio:0) {
.some-element-using-small-caps {
    font-size: .85em 
 }
}

You can target the browsers individually by using css hacks like this:

@-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
}

A nicer way however in my opinion involves a tiny bit of javascript that detects the browser and sets a class on the html element and then you can use that class as a base for targeting the individual browsers.

in the end it would look something like this:

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

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

and of course the same for chrome and whatever else browser

I am having a similar issue with a much weirder issue between Safari on iPad vs Safari on Desktops, showing a different scale for small-caps at 16px. For some reason small-caps is a bigger size on iPads, kinda matching that of Firefox.

Adjusting the font size or letter-spacing a half pixel less or so, can mitigate the issue without further additional hack. By essentially finding a tiny middle adjustment which trigger on one browser but not on another, to try and get as close as possible.

What I have observed for Firefox and IE, is that fonts tend to scale with many more intermediate sizes than that of Webkit. For example, in IE and Firefox, 15.6px is a tiny bit bigger or use more tracking to adjust, than that of 15.5px, and so is 15.7px, 15.8px etc. With a difference for nearly every 0.1 pixel. Whereas in Safari the difference is only perceived for every 0.4px or so.

For my small-caps case here which created an overflow issue, I used 15.5px, which is barely different from 16px on Safari (Desktop), yet bring down the small-caps size for IE and Firefox as close as possible to Safari's.