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...
Related
I have a CSS stylesheet that specifies the font for each paragraph class:
p.body {
font-family: Tahoma;
/* (more properties omitted for brevity) */
}
p.bodytextcenter {
font-family: Tahoma;
}
p.bodytextright {
font-family: Tahoma;
}
(etc. for dozens of styles).
Now I have to use a different font for some languages. I can do this by making a new selector p.body[lang="de"] etc, but I'd have to do that for every style in my list.
Is there a way to specify p[lang="de"] and have it apply to all paragraphs with that language attribute? Or would this require me to remove the font-family attribute from every paragraph class?
p[lang="de"] this may work but if not you can add !important on the font family style
Give this a try:
html body p[lang=de]
...or similar, depending on your actual HTML. You just need to add more levels of specificity.
This can't properly be answered without seeing your HTML; but I'm going to guess that the CSS is poorly structured, and that's what's making this hard for you. Doing the above is slightly hackish, but syntactically legit.
The rest of this might not help so much now, but good to keep in mind for the next project....
It's best to design your page structure based on the semantic meaning rather than the specific effect. Navigation, article, aside, sidebar; not left, right, bold, etc. Imagine you have a sidebar on the right. You could name it "sidebar" or "textright". But down the road you decide to put it on the left.... or do something completely different on mobile. Now "textright" is just mislabelled.
Even keeping with your current way of doing it, you should note that an element can have multiple classes. So rather than having:
<p class="body">...</p>
<p class="bodytextcenter">...</p>
<p class="bodytextright">...</p>
you could have something like:
<p class="body">...</p>
<p class="body textcenter">...</p>
<p class="body textright">...</p>
With that you can set fonts on p.body, and layout on p.textcenter and p.textright
That's an imperfect answer for the current project, as it would require changing a lot of existing text, but that goes back to the initial issue -- poorly structured CSS. (And again, without seeing HTML I'm mostly guessing here....)
I was wondering if someone could point me in the right direction. I am looking to display the Google Font Orbitron at consistent weights at every given font size. Sounds pretty easy, right? Not in my scenario. At certain font-sizes, some characters have multiple weights within the same character.
Note: I am testing this in Windows 7, Chrome v27
The Code:
<link href='http://fonts.googleapis.com/css?family=Orbitron:400,500,700,900' rel='stylesheet' type='text/css'>
.sixteen{
font-family: Orbitron;
font-weight: 400;
font-size: 16px;
line-height: 22px;
}
.nineteen{
font-family: Orbitron;
font-weight: 400;
font-size: 19px;
line-height: 22px;
}
<h4 class="sixteen">Home of Front End Developer and</h4>
<h4 class="nineteen">Home of Front End Developer and</h4>
Here is a fiddle to explain my issue. If you take a look at the fiddle, you'll see in the first line that the top line of the uppercase F, E, and D characters have more weight/thickness than the rest of the characters in that line. But as you'll notice on the next line, that
In case you cannot replicate what I'm seeing, here's a screenshot:
My question is two-fold:
What would the best way to technically describe this? 'Multiple font weights in one given character' lacks brevity, and isn't likely to have any valuable Google results.
Is there a way to fix this and make the weight consistent in every character at every font-size?
What you describe is as such just variation of the visible width of strokes in glyphs, or stroke width variation to put it briefly. Such variation is normal in serif fonts and also appears, at least to some extent, in many sans-serif fonts. However, in this case, the font is designed to have a rather constant stroke width, so the visible effect is caused by font rendering differences.
There is no way to remove the font rendering differences. Font rendering is a complex issue, and although some proposed or experimental CSS settings might affect some aspects of it, it’s basically outside your control. For example, font smoothing (also known as anti-aliasing) depends on the operating system and its settings as well as the browser and its settings.
I've found this issue with a bunch of fonts used online when you go down to a certain size. It's the way the font is being anti-aliased.
You can see the same issue from Google showing off that font: http://www.google.com/fonts/specimen/Orbitron
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! :)
I have a general style sheet (general.css) that spans across each page of my site, and more specific style sheets that apply to certain pages. I'd like to take one of the selectors from general.css and embed it into the selectors of my specific sheets.
For example:
(From general.css)
.PrimaryFont {
font-family:"Palatino Linotype", "Book Antiqua", serif;
text-transform: uppercase;
font-weight: normal;
}
(From specific.css)
h1 {
.PrimaryFont;
font-size: 18pt;
}
This way, I won't have to mark up my html to death, and, if I choose to change the Primary Font, I will only have to do so in one spot.
I know LESS lets you embed, but since I'm new to CSS I was hoping there was some magical way a third party wasn't necessary.
Thanks!
Nope. CSS doesn't allow for mixins. You need to use something like LESS/SASS or some other CSS meta framework
The best way to do in plain CSS would be just adding extra classes to elements, but as well as being messy that can quickly get excessive. I would really recommend trying out LESS - it is amazingly good to use.
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.