When displaying Greek symbols with, for example, π, I get very different results in Chrome and Safari versus Firefox. As some example text, I have:
Chrome:
Firefox:
Is there a way to get Webkit to render the letters closer to Gecko's style, which I much prefer here?
EDIT: Actually, it seems the problem does not have to do with Webkit itself, as it seems to render the way I like it under Chrome in Windows 7: (I was using Snow Leopard and didn't bother to check on my other computers, heh)
Also, a bit offtopic, but does anyone know why the fonts seem to be rendered a bit more boldly on the Mac than on the PC?
I would guess that firefox is using the Symbol font, whereas Safari is using whichever unicode font has the right characters.
On my Mac, this works: <span style="font-family: Symbol">π</span>. Also, setting the font of the container to Times New Roman seems to work as well.
Okay, so the weirdest thing happened. I was looking at my site again and suddenly realized that the Greek was rendering perfectly. Am not sure what happened, since I don't think I ran any updates or anything, but the problem's gone now. Not very helpful of course to others with this problem, but that's just what happened...
Your browser will render using whatever fonts it has available. Some fonts may be missing certain characters, in which case the browser will use another font for those characers. If, in your CSS, you tell the browser what the font-family is, it can better pick a matching font.
font: "Times New Roman", serif;
Now the browser will pull in missing characters from a serif font.
Of course, with the #font-face directive, you can force the use of a font which has all the characters you need.
Related
I'm using Chrome Version 68.0.3440.106 (Official Build) (64-bit) on macOS Sierra 10.12.6.
I have the following code:
<div class="emoji">☺️</div>
It's rendering this:
Instead of this:
It only happens with this specific emoji. All others work fine. Why?
If you are a developer trying to fix that on your website try adding some font-family to emoji. This one worked for same issue I had.
font-family: apple color emoji, segoe ui emoji, noto color emoji, android emoji, emojisymbols, emojione mozilla, twemoji mozilla, segoe ui symbol;
If you are the user, you can install chrome extension which handles emojis chromoji
I know that my answer is a bit late. But I've faced with the same problem and solve it through adding to my CSS file #font-face import. Also I've downloaded NotoColorEmoji font by Google. Here is page of this font. TrueType file is on it's github. So, after this even Chromium displays emojis on my site correctly.
The CSS properties in this answer were a good attempt at making emoji "just work", but as the blog post The struggle of using native emoji on the web illustrates, it can have unintended side effects.
One problem is that the fonts treat special characters like #, * and numbers as emoji. So you need to be selective about which parts of the text have the font-family applied, and be sure the text is actually something that should be unconditionally treated as emoji.
Even if it does appear to work, the emoji that will be shown varies by OS and browser, so it's inconsistent at best.
Ultimately, I gave up on trying to make emoji work for my use case.
I know there is a total flood of font rendering related questions on all sorts of sites these days. One of them should provide me with an answer, so you would think. However much I search I cannot seem to find a solution for my problem though.
In google chrome almost all fonts are displayed bold. Well that wouldn't really be the end of the world. What bugs me even more is, that they are rendered very jittery. As in they look sort of distorted.
I have made a picture to show the difference between my firefox and chrome font rendering:
http://i.stack.imgur.com/hYRh4.png
I simply want to get rid of this. It has been bothering me for a while and no solution I can find on the web helps.
For the record I have uninstalled and reinstalled chrome. Also I have disabled Direct Write in the chrome://flags.
Any help?
This is actually not a rendering problem, but a font loading problem. Firefox shows Arial (a font optimized for rendering at small sizes), while Chrome shows Helvetica (which is not, at least your installed version).
The editor from your screenshot probably asks for the font Helvetica and, if Helvetica is not available, Arial and other sans-serif fonts. I assume you only have the Bold version of Helvetica installed on your computer. It actually should display the Regular version, but it isn't available.
Firefox therefore falls back on Arial, while Chrome shows the closest weight you do have: the Bold version.
To fix your problem, you should try uninstalling Helvetica Bold (through Control Panel > Fonts). Note it can also go by other names such as Helvetica Neue, Helvetica LT Std, Neue Helvetica, etc. Don't forget to restart just to be sure. Then Chrome should also show the optimized Arial.
Eventhough the question is kind of old, the "problem" may still occur and I found another scenario which causes this text-appearance to happen (which, honestly, brought me here).
In my case, I did not note that my jQuery callback loops and renders the text multiple times to a fix position, about 20 times. I checked the entire css. font-family, text-rendering (geometricPrecision in this scenario), font-weight and what not.
It took me quite a while to figure out that I had 20 divs over each other with the same text, because I've got a very complex and deeply encapsulated DOM there.
So if you ever get here with similar problems, you may also want to check for this one.
The easiest way to check is, to delete the element holding the text using the browser integrated inspector / developer tools (Windows: F12, Mac: ALT+CMD+I) - navigate to "Elements", toggle the left icon (that one with the cursor symbol in it) to blue (active), click the element in your browser. It should be highlighted under "Elements" now, easiest way to find it in the DOM. Right-Click and delete it. If you still see the text, you've most likely got multiple overlays while you only wanted one.
I just want to say that I resolved this issue by deleting a whole Roboto Font Family from the system. (MacOS Big Sur 11.2 (20D64).
So I'm front-end coding this flashy new start-up website and I am using a specific font. I am using #font-face, and the font shows in all browsers but some issues:
1) The font looks pixelated which makes it kinda ugly. This problem actually has happened to me before with other fonts so I will be happy if somebody recommends me how to get the font smooth.
2) In Opera and Safari the font renders normally (still pixelated) but in IE, Firefox and Chrome it renders bold, kinda bolder than normal. I tried putting font-weight but the font doesn't support any weight so it's normal. Any ideas on that problem ?
I really want this font and I can't understand how everybody is using font-face with all those rendering problems. I hope I am missing something.
Depends on what OS are you using since #font-face uses OS font rendering engine. On Windows XP just forget about getting it done right. Windows 7 does the job pretty much ok also in IE7/8.
One thing that can cause your fonts to look jagged can be the Cleartype options - turning it off fixes the edges since it won't do the extra anti-aliasing that is not needed since the embeded font is already anti-aliased.
One way to disable cleartype on the client side is to apply a IE specific filter: property (just use some simple property so it won't do anything except triggering the effect - like rotation by 0 degrees) to your headers in css - that causes IE to turn off cleartype to avoid conflicts between filter rendering and Cleartype rendering. But this will fix IE only.
There is also webkit specific -webkit-font-smoothing which works ok and might help you with chrome and css3 font-smooth (never used this one so can't tell you about results or supported browsers).
Most solid thing you could do, if you really want to keep your selected font, is to use Cufon or similar font replacer. From my experience it does the job with an extra script load.
Overall for #font-face there is no solid solution to get it look the same on all browsers and systems.
I'm coming across a weird issue with displaying "dingbats" html entities, specifically ✔ (✔). I am trying to display some checkmarks, wrapped in a simple <span>:
<span style="font-family: serif; font-size: 200%">✔</span>
This is working in Firefox 3.6, Chrome and IE8 on my computer, but in Firefox 4 on a coworker's computer, instead of displaying a checkmark, a blank space appears. Strangely, on the same computer, the checkmark appears properly in IE9 and Chrome.
I have tried explicitly specifying other fonts (including: Times New Roman, Arial, "Dingbats"), specifying no specific font, and even not specifying any style information at all, all to no avail. I suppose I could use an image instead, but I wanted the flexibility of being able to style the character without having to create a new image each time.
Any suggestions on how to approach this?
EDIT: This is how this page (with a search for hex 2714) looks for him in...
IE 9:
Firefox 4:
This is a shot in the dark, but I remember reading that some browsers try to "guess" at the character set being used depending on the web server settings, the content, etc. Could the browser be rendering the character using the wrong character set?
Even as I read over my own answer I suspect this may not be the issue... but thought I'd put it out there just in case.
I cannot reproduce the error in FF4.01. However, this might be to do with the fonts installed on your coworker's machine - as has already been suggested. Ask him to set the standard font to "Arial Unicode MS" or "Lucida Sans Unicode" (if these two don't appear in the fonts list, your coworker would have to install them) and see if it works.
If it does, you should consider setting <span style="font-family: 'Arial Unicode MS', 'Lucida Sans Unicode', sans-serif;">. Although this seems to be a highly machine-specific problem, there is still a chance this might happen on other machines as well.
The character encoding shouldn't have any impact, it should work under ISO-8859-1 as well as UTF-8 to UTF-32 - at least.
It is possible to force a font in some browsers. The user is allowed to specify a desired font. Even if the site uses a specific font it will not be displayed.
Your coworker might have inserted a value for this option.
is it just me, or does Chrome no longer render HTML characters such as the —? I've tried changing the DOCTYPE, changing the character encoding meta tag, changing the character encoding option in Chrome, and even using the entity number instead of the entity name. I cannot for the life of me get Chrome to display an em dash, and I've noticed that it isn't rendering it for other sites as well. Has anyone else had this problem also?
UPDATE
Are you sure the font you're using
actually has an em dash character? - Andrew Marshall
It just dawned on me what's going on. A while ago, I wanted to be able to use Helvetica Neue on Windows, and I didn't want to fork out a few hundred bucks, so I copied the font file from a Mac, converted it to a TTF on Ubuntu, and brought it over to Windows. I guess the tool I used didn't convert all the characters because it obviously can't display the em dash. The only reason I noticed the problem in Chrome is because the other non-webkit browsers wouldn't use Helvetica Neue for some reason.
Arg... I feel stupid. Thanks for the help!
I'd argue that HTML entities should be avoided (except &, of course). Instead just use the actual character and declare (and save) your HTML as UTF-8, something you should already be doing.
There are several top sites that do this, in particular with the use of © instead of ©.