问题
if i use @font-face font and font-variant: small-caps for the same selector the font will fallback to the next system default font in safari. how do i get around that?
回答1:
I had some trouble creating an example to replicate your issue at first, which made me realize that font-face is not a standard CSS2 attribute; the equivalent is font-family. So I did some quick research on @font-face, and found that it's -- depending on how you look at it -- either a non-standard attribute specific to Firefox 3.5 or a part of the not-yet-mainstream CSS3. Safari has partial support for CSS3, depending on version, but I suspect that this is the cause of your undesired behavior.
回答2:
This was a WebKit bug. It’s been fixed, and Safari should be fine the next time it’s updated. The current version of Chrome is using a newer version of WebKit where the bug has been fixed. Here’s a good way to detect it (from SafariSmallCapsWebFontFix):
if ((navigator.userAgent.match(/WebKit\/([^.]+)/) || [] )[1] < 534) {
// Broken, work around it!
}
You could use that JavaScript to, say, add a class to the html node and change how you style the page.
回答3:
Well i think its just a bug :( i now use :first-letter pseudo selector to achieve that
来源：https://stackoverflow.com/questions/2014392/font-face-and-font-variant-bad-idea