In Webkit-Browsern werden Small Caps kleiner als andere Browser angezeigt. Sie können CSS-Medienabfragen verwenden, um Webkit-Browser wie Chrome und Safari einfach zu erkennen. Versuchen Sie etwas wie folgt:
%Vor%Sie können die Browser individuell ansprechen, indem Sie css-Hacks wie folgt verwenden:
%Vor%Eine schönere Methode, aber meiner Meinung nach beinhaltet ein kleines bisschen JavaScript, das den Browser erkennt und eine Klasse für das html-Element setzt, und dann können Sie diese Klasse als Basis für die Ausrichtung auf die einzelnen Browser verwenden.
am Ende würde es ungefähr so aussehen:
%Vor%und natürlich das gleiche für Chrome und was auch immer sonst Browser
Ich habe ein ähnliches Problem mit einem viel seltsameren Problem zwischen Safari auf iPad und Safari auf Desktops, das eine andere Skalierung für Small Caps bei 16px zeigt. Aus irgendeinem Grund sind Small Caps auf iPads größer und entsprechen denen von Firefox.
Wenn Sie die Schriftgröße oder den Buchstabenabstand um etwa einen halben Pixel verkleinern, kann das Problem ohne weitere zusätzliche Hacks gemildert werden. Indem wir im Wesentlichen eine winzige mittlere Anpassung finden, die auf einem Browser, aber nicht auf einem anderen ausgelöst wird, um so nahe wie möglich zu kommen.
Was ich bei Firefox und IE beobachtet habe, ist, dass Schriftarten mit viel mehr Zwischengrößen skaliert werden als die von Webkit. Zum Beispiel, in IE und Firefox, 15.6px ist ein kleines bisschen größer oder verwenden Sie mehr Tracking zu justieren, als das von 15.5px, und so ist 15.7px, 15.8px etc. Mit einem Unterschied für fast alle 0,1 Pixel. Während in Safari der Unterschied nur für jede 0.4px oder so wahrgenommen wird.
Für meine Small-Caps-Version, die ein Überlaufproblem verursacht hat, habe ich 15.5px verwendet, was sich kaum von 16px auf Safari (Desktop) unterscheidet, aber die Small Caps für IE und Firefox so nah wie möglich bringen Safari.
Tags und Links css google-chrome firefox fonts text-rendering