I have a CSS declaration like this:
font-family: font1, font2, font3;
where font1 is an embedded eot/ttf font, but the problem is that this font is smaller than the other fonts so I want to have a different font-size (1.8em) for this font (font1). All other fonts (font2, font3) stay untouched.
The problem is, that I cannot verify if the user's browser uses font1, font2 or font3. Is there any css declaration which allows different font-sizes for different families?
Thanks.
There is a way to do this, but it's as of now very badly supported. The CSS property you are looking for is font-size-adjust - a new CSS3 property introduced specifically to address this problem. The specification says:
In situations where font fallback
occurs, fallback fonts may not share
the same aspect ratio as the desired
font family and will thus appear less
readable. The font-size-adjust
property is a way to preserve the
readability of text when font fallback
occurs. It does this by adjusting the
font-size so that the x-height is the
same irregardless of the font used.
However, it is only supported in Firefox as of now, so you might want to look for alternatives.
For examples of how to use it, see:
http://webdesignernotebook.com/css/the-little-known-font-size-adjust-css3-property/
https://developer.mozilla.org/en/CSS/font-size-adjust
http://www.fonttester.com/help/css_property/font-size-adjust.html
http://www.w3.org/TR/css3-fonts/#relative-sizing-the-font-size-adjust-pro
I know it has been a while, but recently I stumbled upon the very same problem as described by the OP. As font-size-adjust is still very poorly supported, I'd like to share another solution that worked for me:
Note: The following solution does only work if the fonts are embedded using the #font-face-declaration.
In that case just include e.g.
size-adjust: 90%;
in your #font-face-declaration. The relevant font will appear at only 90% the size of the specified size.
Browser support
Browser support is currently at 74% with all major browsers supported except for Safari and IE. I know this is far from optimal. But as this problem is "just" about design and not about functionality, I suppose it is better than nothing.
Related
I'm trying to figure out why does the arrow symbol render differently on Chrome and Internet Explorer but without any success. Surprisingly IE displays it correctly while Chrome has problems with rendering. Ignore the difference in size, it is due to zooming.
Chrome
IE
Regarding CSS, there is only Eric Meyer's CSS reset and CSS rules for the font size, family, color and smoothing so there isn't anything else that could mess this up.
When the font in use doesn't contain a character you want to display, the browser uses a fallback font which does. Now in this case, it turns out that IE and Chrome use different fonts to fall back to.
Solution: use a font of which you are certain that it does contain the character, so there won't be any falling back. Check with a character selector such as CharMap.
However, if you want to make absolutely, positively sure that all browsers will display the very same thing everywhere, you should also consider using a webfont, for those machines that don't have your font installed. Or alternatively, use an image.
I am trying this solution for a star rating.
Can someone please explain why the stars are so much bigger in chrome than in firefox? (I know that webkit and gecko are doing different things from time to time but so much difference?)
And has someone a suggestion on how to fix that?
Update:
This is how big the difference is on my mac:
You are seeing the characters in different fonts in different browsers. The size of a character may well very by font (even when the font size is the same).
The technique uses the characters “★” U+2605 BLACK STAR and “☆” U+2606 WHITE STAR, which are present in a few fonts only. If the font-family property on the relevant element does not mention any font containing those characters, browsers will (or at least should) use some backup font, and different browsers use different lists of backup fonts.
You can make it more probable (though not certain) that different browsers in the same system use the same font for the characters by listing suitable fonts in the font-family list. Even then, the results will vary by system, depending on the set of installed fonts. And in some systems, the rendering may even fail, because no font contains those characters.
This issue could be addressed using downloadable fonts, but that would probably be overkill here.
The practical workaround is to use just images, with a sequence of elements like <img src=star.png alt=star> and <img src=whitestar.png alt=""> or (for better accessibility) a pre-made image that contains a specific number of stars, like <img src=stars4.png alt="four stars out of five">.
I had the same issue and have found that using U+2B51 and U+2B52 ("BLACK SMALL STAR" and "BLACK WHITE STAR") displays consistently between Chrome and Firefox. (Haven't tested thoroughly across other browsers and browser versions yet though.)
May be it's strange for you.. But I dont find any difference in the browsers.
find attached image.
Characters in different browsers may vary. Use image as star. Not char. http://i.imgur.com/I2x2Yld.png use {content:''; background:url(....) no-repeat;}
Disclaimer: I know that I should be using a sprite for my nav, I just couldn't get it to work with my images. Yes I know what I have now is a bad substitute. Please don't judge the current state of my site as it is in a very early stage and I am quite new to coding.
Please look at my code and tell me why
there is a white border around my header
the font is not showing up as it's supposed to.
Thank you so much!
Website: http://www.philecialabounty.com/KVS2/index.html
Roboto-Thin Font is supposed to look like: http://www.fontsquirrel.com/fonts/roboto
In regards to the border, your body is using the browser's default margin + padding for the body. Look into a CSS reset file. Or take a look at boilerplate or just assign body a margin/padding of 0.
In regards to the font not showing up properly, can you only use web-safe fonts in the font family declaritive for css. If you want to use better fonts look up Google fonts or cufon (which I usually use)
As #hendr1x suggests, the reason for the padding/margin is that every browser has it's own default stylesheet which it uses for some very basic base properties. If you were to check out the stylesheets used by various websites, you'd often bump into something named reset.css, which is just a simple stylesheet to ensure that basic styling is consistent across browsers, due to the issue above. Therefore, if you're only styling issue is the padding/margin on the body set by many browsers, just add:
body {
margin:0;
padding:0;
}
At the top of your stylesheet.css. Alternatively, you could Google for a reset.css file, which would also do the job and more.
It's a little unclear what you mean as to "the font is not showing up properly" - I'll take that to mean that it's rendering poorly (i.e. it looks uncrisp/jaggedy/poor). If you're a Windows Chrome user, then, like many, you've just bumped into how poor it's font rendering can be. Bearing in mind that Chrome's market share is so high, perhaps you should reconsider your choice of font, and find one that's Chrome friendly. As a Firefox user, I find few/no issues with font rendering in Gecko, but I do often find problems with Legacy IE and Chrome. Google Web-Fonts is a great resource for web-safe fonts, though even then I'd note that Chrome issues are still rife.
Also: Why do you have a <center> tag? It doesn't seem to be doing anything and it's not in the HTML5 spec - I'd advise you remove it.
In chrome the font appears to be 1px smaller than FF and IE and I cannot see why. The font used is "Georgia" and there are no specific browser commands in the CSS or HTML so I cannot figure out why chrome is displaying it different.
Has anyone come across this before?
Thanks.
This could be based on various factors. Chrome and Firefox use different font rendering engines, and they also differ in how they interpret ClearType font settings within Windows. As well, different browsers apply different default CSS styles to unmarked documents which can cause discrepancies in font-size, among other things. You could try using something like a CSS Reset stylesheet to possibly quell some of the problems, http://www.cssreset.com/ but there's no guarantee that will fix it.
if you want to achieve the same style for every browser, you should try this:
sitewizard
it helped me a lot when i came across the issue. Maybe there is a more elegant solution for the problem but this works definetly.
Text will always differ somewhat between different browsers, and between different systems. Even the same browser on the same operating system may give different results, as there are text rendering settings in the system that may affect the apperance
Also, font sizes aren't really measured in pixels, but in points, so there might be a difference in how browsers translate pixel sizes to points.
I'm having a problem with math symbols (e.g. '∠') displaying too small in firefox. I've fixed this by using <span style="font-size:200%;">∠</span>, but then it's too big in other browsers.
Is there a way, using inline CSS (I can't change the document head or external CSS), to make the size increase apply to Firefox only?
The other option is a MathML-generated image, but that would make searching for exact equation strings impossible.
This is a font issue and should be addressed at the font level. It is a browser issue indirectly only: different browsers have different default fonts and different lists of backup fonts that they use, when a character cannot be found in any of the of the fonts suggested by the document itself. (For generalities on such matters, see my Guide to using special characters in HTML.)
This means that you should inspect the list of fonts that contain the character you need, and
http://www.fileformat.info/info/unicode/char/2220/fontsupport.htm
is rather good (it does not cover all fonts, but probably all fonts that Joe Q. Public might have in his computer). Then pick up the fonts where the rendering is acceptable for your needs, taking into account your copy text font choices.
For example, on my system (Win 7), Firefox displays an unstyled “∠” indeed as smaller than IE does, but this is not caused by differences in font size. Changing the font size would be a shot in the dark. Instead, if I use
<span style="font-family: Lucida Sans Unicode">∠</span>
I get the same rendering on both (or all) browsers in my system. Lucida Sans Unicode is available on Windows (universally, I suppose), so you may consider adding some backup fonts to the font-family list, like Dejavu Sans. (Most of the fonts that contain the angle character are so rarely available that they are probably not worth listing down there, even if you could take a look at the appearance.)
You can apply a class (or just use span) and in your css, do this;
<style type="text/css">
#-moz-document url-prefix() {
span {
font-size:200%;
}
}
</style>
The url-prefix rule applies the rule to any page whose URL starts with it.
#-moz-document url-prefix() {
/*your needs*/
}
#-moz- is a Gecko layout engine specific rule.It is not a standard rule.It is a mozilla specific extension.