Is there any way to specify different font sizes for fallback fonts in CSS? I want to do something like this (which obviously does not work):
div {
font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
font-size: 20px, 18px, 18px, 18px;
}
The idea being that Arial Narrow would display at 20px if the user has it installed; if not, the browser would fall back to Arial at 18px, then Helvetica at 18px, etc.
Or, could I use JS to achieve a similar effect?
I understand what you want, but I think the answer to your question is "No, this can't be done in CSS", at least not in CSS2 afaik.
Hoping someone can prove me wrong, 'cause i want this too :D
I suppose JS can accomplish this, at least up to some point. Not sure if there is a "is this font installed?" method in JS, but you may be able to make some educated guesses based on OS and such. Got no experience there sorry.
Edit: some quick googling does provide a few clever JS tricks, though I haven't tried them yet. E.g. http://remysharp.com/2008/07/08/how-to-detect-if-a-font-is-installed-only-using-javascript/
Another edit, after some more searching: I was triggered by the "someone should propose it" :D. It seems CSS3 spec has the "font-size-adjust", which may be of use here. However, support in browsers other than Firefox may not be optimal at the time I write this. Here's the W3 word on that property: http://www.w3.org/TR/WD-font/#font-size-adjust
I had a related problem using CSS3 fonts, which obviously don't work in IE6-8. The fallback font (Arial) is much bigger than the default font. Got round it in a similar way to mVChr but by detecting the browser. Not pretty really, but the joys of having to support IE. Code (with jQuery):
<script>
$(document).ready(function() {
//change font sizes in IE6-8 because they display Arial not Dincon
if(navigator.userAgent.indexOf('MSIE 6') > -1
|| navigator.userAgent.indexOf('MSIE 7') > -1
|| navigator.userAgent.indexOf('MSIE 8') > -1) {
$('.offending-class').css('font-size', '11px');
}
});
</script>
With Javascript, you can make a span with a capital "A" in it. If Arial Narrow is installed, this will have a width of 11px, if not it will have a width greater than that. You can check this span and then hide it to determine what you have installed.
a = document.createElement('span');
a.innerHTML = 'A';
a.style.display = 'inline';
a.style.fontFamily = '"Arial Narrow", Arial, Helvetica, sans-serif';
a.style.fontSize = '20px';
document.body.appendChild(a);
aw = a.offsetWidth;
a.style.display = 'none';
a.parentNode.removeChild(a);
if (aw > 11) {
document.getElementById('yourDiv').style.fontSize = '18px';
} else {
document.getElementById('yourDiv').style.fontSize = '20px';
}
If Arial Narrow is missing on some browsers, those browsers normally accept @font-face urls like
@font-face {
font-family: Arial Narrow;
src: url(Arial Narrow.otf);
}
@font-face I find works on all common browsers except for IE8/IE9, if vista dose not have Arial Narrow for example I use fullback CSS for IE8 with new font size
<head>
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie7.css">
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="css/ie7.css">
<![endif]-->
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="css/ie7.css">
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="css/ie7.css">
<![endif]-->
</head>Maybe a pretty obvious answer, but as long as there is no CSS rule for specifying the font-size of a backup font - which would make a lot of sense, the next best solution I found is to insert the font-family for each offending element and then pick as the fallback font something with a similar size or a smaller type to reduce the impact on your CLS (I found out Tahoma to be a great pick most of the time).
