while working on an international website, i'm confronted to an inconsistency, the font size differ on chrome/ff on the display of the arabic font, that i can't seem to fix in css only (base size of the font are differents so i can't fix them for all of them).
do you know a way to do that without JS, or should I make separate css with browser agent detection ?
thanks
i found that my problem was related to the lack of italic variant on my arabic font, i now have a consistent view on all cases
Related
A client is using the PT Sans Regular font on their website and complaining that certain letters, like capital D, are being cut off at the top. I've confirmed that it's happening in all browsers on Windows. IE11, Chrome and Firefox. It looks fine on Mac. The problem persists when I change the font size, weight, line-height, etc. I'm stumped. Any suggestions?
Please convert your font again with all web supportive fonts format's and used it.
For conversion font I mostly used the below url:
http://www.fontconverter.org/
Write custom font face in style sheet to render the font.
My site has thumbs up images that I want to render these as HTML entities. The decimal and hex codes are:
👍
👍
respectively.
In FF, both codes are rendered as a thumbs up but in Chrome neither is (nothing is displayed at all).
Here is the rendering (in white) on a dark background.
Why is this happening?
In general, for emoji entities like this, you can't rely on the end user's font including it. This is especially true of Chrome (as of December 2014), which is the last major remaining browser where rendering emoji doesn't work by default.
You're best off using an image here.
A custom font is also a good solution (hat tip to #Vucko).
The font support to THUMBS UP SIGN (U+1F44D) is very limited, as usual for any characters added to Unicode recently (during the last few years). A large number of users’ system have none of the fonts, so the only way to make almost all browsers render the character is to use a downloadable font (web font) via #font-face; in practice, you would use Quivira or Symbola for this. As they are rather large fonts, using an image may be a better option.
What happens when you use the character and do not specify the font at all, or specify a font or list of fonts not containing that character, is that browsers will use some backup fonts. They may do this in different ways, so that browsers in the same system render it differently, since they scan thru the list of fonts in a different order. Moreover, browsers have bugs in this respect. They are expected (according to CSS specifications) to render the character if any of the fonts in the system contains it, but they often fail to do that. Sometimes this is caused by a faulty font: a font contains information according to which it has a certain character, so the browser uses that font, but in fact the character is missing and some generic symbol appears. Sometimes we just don’t know why it fails.
You can avoid such bugs by explicitly listing fonts that are known to contain the character. But this is of course ineffective when the user’s system has none of the fonts.
<style>
.emoji {
font-family: Segoe UI Emoji, Segoe UI Symbol, Quivira, Symbola;
}
</style>
<span class=emoji>👍</span>
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;}
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've been displaying Chinese fonts on my Chrome browser on my Mac and I liked it. However the font is rendered differently in Firefox or when I use Chrome on Windows. Is there a way to standardize the font that the browser chooses for Chinese characters?
You have various options:
As Art of FITZ says, specify an #font-face and have the font downloaded to the user (which will, indeed, take up a lot of bandwidth if the font is large)
As Jukka says, provide a list of font names in the font property and hope one of these is installed on the user's computer
The legacy method: render the text on your own computer in the font of your choice, upload this as an image file. If you don't have much text to display, this may be even more efficient than having an #font-face clause that downloads a multi-megabyte font file.
Tailor the #font-face to your needs: Depending on the amount of text to display, you may be able to create a font with only the subset of characters you need (with an online utility such as Font Squirrel), reducing the size of the font file to download.
Here is a quick reference to how this line of code is used.
http://www.css3.info/preview/web-fonts-with-font-face/
Different browsers have different default fonts, but can can override this by setting font-family in CSS. Just remember that different computers have different sets of fonts available, so you should normally use a list of fonts, hopefully covering most browsing situations.
Maybe you have done so but see different results on different browsers. Please post a relevant part of the code and/or a URL then.