Is there a way to specify a different font-size for a different font-family. The font I want to use(for purposes of product branding) is a somewhat rare font (FlashDLig) not supported by all PC's and browsers. (my one windows 7 PC with IE 9 does not display it...) Now for a fallback font I use Arial, the problem is that arial is much larger than FlashDLig, so I want to specify a different font-size for it in the same class. Is it possible?
I know you can probably use font-size-adjust but it is only supported in Firefox.
Any suggestions? Javascript magic maybe?
Thanks
I would recommend defaulting to Arial, and then create a second class that uses a #font-face declared for your font. Then I think you'd have to use Javascript to test whether the font was able to load (maybe check derived style of some element you put off-screen), and if so, change the class to the new one. The reason I'd do it that way instead of starting with your custom font has to do with the idea of progressive enhancement.
Here's one way to change the class in Javascript:
if (fontLoaded()) {
document.body.className += " fontLoaded";
}
And then in your CSS:
#font-face {
... /* declare font face */
}
body {
font-family: "Arial";
font-size: 0.8em;
}
body.fontLoaded {
font-family: "FlashDLig";
font-size: 1em;
}
Have a look at the following code examples:
http://www.lalit.org/lab/javascript-css-font-detect/
and
http://remysharp.com/2008/07/08/how-to-detect-if-a-font-is-installed-only-using-javascript/
And adjust your stylesheet from the result of the detection.
I've used these some time ago with good results.
Good luck! :)
Related
What's the standard way to selectively define the font-size of one of the fonts among a gamut of font-families in CSS?
For instance, I'm trying to have my_font appear at 25px size via the following short-hand:
body{
font-family:helvetica,'my_font',arial,sans-serif;
font:helvetica,25px 'my_font',arial,sans-serif;
}
Needless to say, this doesn't work.
I believe the answer is no. The idea of a font-family is that it's a family of fonts not a single version or size.
Probably the best you can do is to just add font-size to each class or css selection that uses that font.
I think you should declare a class where you specify your font and your font-size and then use it specifically where you want. For example:
<div class="myclass">
.myclass {
font-family: 'myFont',
font-size: your-size
}
That would be the #font-face property. It's a property where you can define multiple font families and even modify a specific type of font to your preferences. It goes something like this
body {
#font-face {
font-family: 'my-font';
src: url(path-to-font);
font-size: 24px;
}
}
Read more about it here: http://www.font-face.com/#green_content
I am trying to see if there is a way to conditionals a variable in my scss. The scenario being for a fallback font loader throwing a class on my body when all fonts are loaded - so I could switch out fonts.
So the idea is I have my _variables.scss file set up, and inside it has all my site fonts looking something like this -
$primary-font-family: 'Font1', sans-serif;
$primary-font-normal: 400;
$primary-font-bold: 700;
$secondary-font-family: 'Font2', serif;
$secondary-font-normal: normal;
$secondary-font-bold: normal;
This has been working great for me, but I am looking for an easy way to swap them out without added class listeners in the css to every instance where I am consuming these fonts. So I was wondering if there might be a way to conditionalize these variables -
// if .fonts-loaded class is on body, use loaded font
$primary-font-family: 'Font1', sans-serif;
// else use system default font
$primary-font-family: 'defaultSystemFont', sans-serif;
Unsure if something like this would be possible, does anyone know of a way to achieve this. Thanks for reading!
Sass would never know if something was loaded on the page like JS would.
Once it compiles, Sass becomes static CSS and doesn't necessarily communicate according to changes made on the page (beyond knowing it should style things a certain way according to a pre-defined pseudo-class.)
Also, the more we keep telling a page to "think more" - the less it benefits in terms of loading time.
Since CSS is "cascading", you can always set a default font stack such as:
.stuff {color: #333; font-family: Arial, Helvetica, sans-serif; font-size: 1em;}
...and then, lower in the CSS (possibly within a partial that's imported after the global layout, as part of the theme):
.stuff {font-family: "SuperSpecialFont";}
It will then load, as it's read, setting the default foundation and then progressively enhancing it. Sass won't ever be aware of a page's loading status, however, it will deliver style based on what's available and when - which allows you to have a fallback until everything it's supposed to present is in place.
===
According to your comment, there doesn't seem to be a reason for a conditional in this case.
Fundamental CSS would handle it with .thisClass .thatClass or .thisClass > .thatClass - depending on how strict you want to be. So, for example, in Sass:
.thatClass {
color: #333;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
}
.thisClass {
.thatClass {
font-family: 'SuperSpecialFont';
}
}
If it's nested inside of .thisClass, then it will apply those properties. If not, it will stay as it was originally defined.
I would like to use different fonts in my web application. As their size are not equal, I want to do something in CSS like this pseudo-code:
if (exists(font1))
{
font-size: 9pt; font-family: font1;
}
else
{
font-size: 12pt; font-family: font2;
}
Is it possible? What's the best and correct solution for it? How can I define font-size for a certain font and define another font-size for the next one ?
CSS generally does not have conditions or other dynamic structures.
Your problem is solved through the use of so called "font stacks". You declare font-family with a list of comma separated fonts-names. The client browser now picks the font from that list which he has available. That's why the creation of good font stacks is a tricky task (because they should look similar or at least have similar letter spacing / line-height). If you google for Web font stacks you will get some good articles about that topic from professional font-guys who already did the work for you creating nice font-stacks.
An alternative nowadays is to provide the font you want as downloadable font via the #font-face declaration. However keep in mind that:
you need several formats to support all browsers
they add additional weight to the page load which might be relevant for mobiles
You need the right to use the font or use a free font (Google offers a service where you can pick from a variety of free fonts)
You can use javascript statements for that.. or you can assign different id's for your text. For Eg:-
<div id="font1"><p>Some Text</p></div>
and then in your css file :-
#font1 p{
font-family:sans-serif;
font-size:10px;
}
so you can assign different fonts to different texts in your web application pretty well...
Say if I set the font-family for the page body to font1, font2, font3 and then I set the h1 tag's font family to font4, font5. If font 4 and 5 weren't installed, would the browser try font 1,2 and 3 before it used the browsers default font?
No, because when you specify font-family, the font stack doesn't get inherited from the parent element and then added to. You're giving it a brand new font stack of its own, separate from its parent element's.
If you want the browser to use the first three fonts for <h1>, you need to specify that:
body { font-family: font1, font2, font3; }
h1 { font-family: font4, font5, font1, font2, font3; }
Tedious, but that's how CSS font-family works :)
Short Answer: No
Good question. The feature you are talking about is known as inheritance. Essentially, will a child element inherit a parent's font-family if its own specified font-family is not installed on the user's computer.
I couldn't find any explicit documentation although this specification could be taken to mean that no inheritance will occur in this case. Therefore, to make sure, I tested out the latest stable build of Firefox with the following:
<body>
<p>Hello</p>
</body>
body {font-family: Arial;}
p {font-family: Quill;}
I don't have Quill installed but I do have Arial. However, despite this fact, the p element is rendered in the default serif font, not in Arial.
Since there is at least one major browser that functions in this way, in order to ensure consistency, you should always use this instead:
body {font-family: Arial;}
p {font-family: Quill, Arial;}
Thinking more about this, one way to fix this would be to allow the following:
p {font-family: Quill, inherit}
p {font-family: Quill, default}
The second rule is essentially what browsers do at the moment, but only implicitly. If CSS allowed us to specify the last property explicitly, we could alter this behaviour. Unfortunately, this does not work currently. Anybody know how to submit suggestions to the w3C?
nope. it will default to the browser default.
I have the following CSS fragment:
INPUT{ font-family: Raavi; font-size: 14px;}
Which works fine when the textbox contains some Punjabi script like this: ਪੰਜਾਬੀ
But the user might enter English instead, and I would rather use the Verdana font with a different size, since the English letters in the Raavi font are real funky and the size is wrong.
So my question could be stated as:
Is there any type of conditional font-family and size selection within CSS based on the input
Is there anyway for CSS to know about the input language?
So I could create the following PSEUDO_CSS:
INPUT{ EN-font-family: Verdana; EN-font-size: 12px; PA-font-family; Raavi; EN-font-size: 14px;}
or
INPUT.EN{ font-family: Verdana; font-size: 12px;}
INPUT.PA{ font-family: Raavi; font-size: 14px;}
This is addressed in CSS3, and that's not going to help for compatibility with old browsers, but it works for me when mixing Greek and Latin text with different fonts for each. Here's an example taken from the CSS Fonts Module Working Draft:
#font-face {
font-family: BBCBengali;
src: url(fonts/BBCBengali.ttf) format("opentype");
unicode-range: U+00-FF, U+980-9FF;
}
The unicode-range bit is the magic key: that tells the browser to use this font-face statement only for this particular block of Unicode characters. If the browser finds characters in that range, it uses this font; for characters outside that range, it falls back to the next most specific CSS statement following the usual pattern of defaulting.
input { font-family: Verdana, Raavi, sans-serif; font-size: 14px;}
This should work for your purposes:
If the text is English, both fonts should contain the glyphs, and Verdana will be preferred
If the text is Punjabi, Verdana should not contain the glyphs, so the browser should fall back to Raavi
I'm not positive if all browsers will behave correctly, but that's what they should do according to the CSS spec.
A pure CSS solution might be as easy as:
input[lang=en] {
font-family:Verdana;
font-size:12px;
}
input[lang=pa] {
font-family:Raavi;
font-size:14px;
}
But it's still up to you to set the lang attribute of the input element.
Unfortunately, as with most fancy CSS features, attribute selectors are not 100% working across the array of browsers today. Your best bet in my opinion is to use a class per language and assign it to the input element.
Update:
Per your request, here's an example of a naive way to do it with vanilla JavaScript. There are certainly improvements to be made, but this "works".
<style type="text/css">
.lang-en {
font-family:Verdana;
font-size:12px;
}
.lang-pa {
font-family:Raavi;
font-size:14px;
}
</style>
<form>
<input type="text" onkeyup="assignLanguage(this);" />
</form>
<script type="text/javascript">
function assignLanguage(inputElement) {
var firstGlyph = inputElement.value.charCodeAt(0);
if((firstGlyph >= 65 && firstGlyph <= 90) || (firstGlyph >= 97 && firstGlyph <= 122)) {
inputElement.setAttribute('lang', 'en');
inputElement.setAttribute('xml:lang', 'en');
inputElement.setAttribute('class', 'lang-en');
} else {
inputElement.setAttribute('lang', 'pa');
inputElement.setAttribute('xml:lang', 'pa');
inputElement.setAttribute('class', 'lang-pa');
}
}
</script>
This example fires after a character has been typed. It then checks if it falls between a range considered "English" and assigns attributes accordingly. It sets the lang, xml:lang, and class attributes.
In your html tag you have that lang property.(just lang='en' or lang='en-EN')
We can use this in CSS.
If we want to give particular CSS for p tag for different language,
p:lang(en-EN){
}
The respective style we need to add.
This is the way that we can give particular css for different languages.
example
html{font-family: Raavi; font-size: 14px;}
html:lang(en-EN){font-family: Verdana; font-size: 12px;}
It is common practice when maintaining multi-lingual websites to use separate CSS files for each language. This is desirable because you will need to adjust more than the font. You will often need to adjust spacing to match the length of strings in the language. Also, you may need to adjust some of the basic formatting of the page in order to make it more natural to users of the language.
The robust answer is to internationalize and not to just settle for a different font because eventually you will find that font selection will be insufficient.
How could CSS know about the input language?
I'm afraid the only solution is to find a unicode font which looks pretty for both character sets. Which is far from perfect if your remote reader has not installed it. Maybe Arial Unicode MS.
The only reliable solution for now is to list the fonts in the desired order, as Miles indicated.
Hopefully the (correct) solution indicated by Zack might be properly supported by more browsers.
But even then it will be your responsibility to tag the various sections with the proper lang attribute.
Nothing can reliably detect the language of any text.