I'm sorry if this isn't the right place to be posting a question like this, but I'm at wit's end trying to figure out an answer. I don't know if it's an encoding issue or what, but on SO many web pages, Chrome won't display some characters properly. Namely things like en and em dashes, elipses, etc.
Here's an example.
That O with the umlaut is supposed to be an ellipses. I don't see the problem on Firefox, and I don't see the problem on another computer with Chrome. Encoding is set to Auto-Detect and UTF-8. If I copy and paste the O with the umlaut, it pastes as an ellipses.
Any idea why this is happening and how I can fix it?
If it pastes back as the expected character, then it is not an encoding problem - it rather would be a font problem: you likely have a font installed in your system that is being used by Chrome to display S.O. (and possibly other pages' text). If this font is broken (like, it has an incorrect encoding declaration itself), this could happen.
The workaround is finding out which is the offensive font and uninstall it from your system.
I had the problem with Chrome on Mac OSX.7.5 using Universal Type Client.
In Chrome go to pop-out side menu (3 horizontal bars) > Tools > Encoding and set the page to Auto-detect, UTF-8 (you should switch auto-detect off if it's slowing the browser down).
In Universal Type Client, there was 2 versions of Arial in conflict with each other.
Select the universal copy of Arial and deactivate it.
All pages now render correctly in Chrome.
I have a similar problem. But the thing is, the writing on the websites displays fine. It is just the writing in the Google Chrome tab that doesn't show. It comes up with squares. To fix this, I had to change the encoding to Auto-Detect and UTF-8 (I have to deselect it and then select it again). Then restart my computer in order for the writing in the tabs to display.
However, I find that the next time I turn on my computer, I have to go through the same process and it's quite irritating. Has anyone else had this problem and if so, how do we work about this?
Cheers,
C
This has been driving me bananas too. The resolution for me was similar to pho3nix's answer; but rather than creating local stylesheet overrides I removed Helvetica Neue Regular from my system. Call me a snob but better than mapping it to Aerial :-)
There was no need to remove Helvetica Neue Condensed, Light or other variants. Somehow Chrome chooses Helvetica Neue Regular to render Helvetica Regular if you have it installed.
There seems to be a problem with the way (at least some) Helvetica Neue font files have been mapped that makes them unsuitable for displaying in a browser but OK in Photoshop or Illustratior.
Related
Quickly, before I begin, Torch is a chromium browser which I use on my desktop PC. I use Chrome on my Macbook Pro 13 inch (256gb one, probably not important), and I get the same issue, which is, in my opinion, really weird given that they're completely separate apart from each other except for how they're both logged into the same account.
So, onto the problem at hand. On some random websites, most notably a Chrome extension called Audio EQ, as well as some local sites such as chrome:// and torch:// depending on what browser I'm using, I get a random string of Chinese characters. It can be translated but it never means anything, so I figured that it's an encoding/decoding error due to the random nature of the text.
The text that's displayed in Audio EQ is this:
http://pastebin.com/RY4048QU
As you can probably tell, this is broken.
I ran it through a batch decoder/encoder website thing, and encoding to UTF-16 resulted in something that looks a little bit more like HTML.
(I would post a link here to it but I don't have 10 reputation, so check the replies to this post below for the link)
It's HTML. Sort of. The text is backwards and the syntax is a little bit off but it at least looks like HTML now.
So what's going on here? How come it happens on both my Mac and my PC even though they're mostly separate (And if it's because they're using the same Google account, how does this affect how encoding/decoding happens?)? Most importantly, how should I go about fixing this?
Thanks for any replies, and sorry for including a lot of text, although this is a more complex issue than I'm used to asking about.
I find a lot questions about Problems with not displayed Icons of Awesome font. But they didn't match my specific Problem.
I try to implement in my website a project from heise.de, called Shariff. Shariff enables website users to share their favorite content in social networtks without compromising their privacy. To realize this not the common Share- or Like-Buttons of Facebook, Twitter etc. are used.
In this project Awesome font is used for example to show the known symbols of Facebook, Twitter etc. near the share-buttons. The Awesome-font is implemented in the file shariff.css by #font-face. I have downloaded the font v=4.6.3 and have installed it on my webspace.
When viewing my demo-site with iPhone/iPad (Safari) or Chrome, I can see the symbols of Facebook, Twitter, LinkedIn, etc. But in IE11 not. To check out if my CSS has some bugs I replaced for example the twitter-symbol by an normal charakcter::
Instead of:
.fa-twitter:before{content:"\f099"}
I used:
.fa-twitter:before{content:"tw"}.
This is working in IE11 and I saw 'tw' before the tweet-button.
I searched the web in the last few days to find a solution for this problem in IE11, but can't find anything that works.
I guess there must be something wrong in the shariff.css where I implement Awesome font via #font-face, but I can't find the bug. So I hope someone here can help. Please be lenient with me if its just something like a missing space, bracket, etc. I'm blind and have to read the CSS-file with an voice-synth, that is in this case a bit difficult.
You will find my test-site and the CSS here:
http://www.sensitive-tiertherapie.de/test/index.htm
http://www.sensitive-tiertherapie.de/test/css/shariff.css
Unfortunately this website is in German, but if you scroll down to the bottom of that site you can see the share-buttons.
I would appreciate if someone could find-out, why it doesn't work as it should.
BTW: I hope my question will be displayed ok, because the handling of this site by screenreader isn't very smooth.
Kind regards, Michael
Many thanks for your feedback, I get the solution:
It was a local accessibility setting of IE11 in:
Extras -> Options -> General -> Accessibility
Here was "ignore fonts on Website" selected. After I turned off this setting, the icons of Awesome-font appears as expected.
So if anyone get into the same trouble, check
1. compatibility mode of IE11 and
2. accessibility settings.
I am currently working on a responsive page which uses unicode symbols on certain elements and I would like them to have the same "look". As I understand, each browser and each operating system have different fonts for unicode symbols, and I noticed that the font-family property was not helping.
My biggest problem right now is that all the unicode symbols that I use show up as colored emojis on smartphones, which often ruins the page's design. Is there any way to fix that? Am I missing something?
The answer to your question can be split into two:
How to not worry about client-side fonts: web fonts
How to use emoji/pictograms without browser changing the rendering: css icon font
The latter part is more relevant as you are specifically dealing with emoji.
Web fonts
Web fonts would solve the cross-system compatibility issue. These are fonts that are served to the browser. Google fonts is a good place to start —it is actually weird to see how much of the web uses them.
If your unicode is more than just Greek or CJK and uses, say, runes, you will need to make your own web font (which is easy, Googling gives many web servers and guides), which takes advantage of #font-face rule (wiki). One serious drawback to the latter is that there is a copyright problem if you use a font you found on some depository or on your machine, so that is something worth looking out for.
Icon font library
An icon font library is a stylesheet library (with a font) that inserts an icon after an empty element with a class named for that icon, e.g. in FontAwesome <i class="fa fa-hand-spock-o"></i>.
As emoji are a recent addition and the support is more than patchy, websites and browsers add the support themselves, often coloring them (e.g. Chromoji extension). Consequently, I strongly suggest using an icon font library.
I am partial to FontAwesome —e.g. an academic tool of mine—, but there are loads of other options, some are:
Bootstrap's Glyphicons
Typicons
Fontello allows a mishmash of various icon font libraries (a longer list can be found there).
If however, the icon you are looking for is absent, you can create an icon font library using one of the many web resources (eg iconmoon.io). For the images themselves, flaticon has large collection of icons that can be converted to a icon library, which saves you time from having to slave away in illustrator.
This question doesn't deal too much with coding itself, but if there's a fix for it in any way, do let me know. I've searched around for a while looking for an answer, as I've had this issue for a long time. Can anyone explain why this text in Chrome looks so terrible? This is just an example of some buttons on this website: bad text image
Each individual letter looks like it's a different size from the previous one, and nothing is smooth. It looks jagged and terrible. I've tried toggling on and off DirectWrite, but that hasn't changed anything. The text is like this on every site, not just StackOverflow of course. I hope this isn't how it's supposed to look...anyone?
Have you tried setting the font for Chrome?
chrome://settings/ > show advanced settings >web content > customize fonts...
Actually, there are a number of different fixes people have found helpful for this.
For one WordPress site I run, the problem was solved by loading a set of font files to our site and implementing #FontFace differently (some additional browser-specific settings and getting the sequence of those correct). This resolved the issue for all users without the need for any local changes to OS or Browser. Other folks have had success with a other CSS formatting settings.
Localised fixes include changing Chrome browser settings, and changing settings in Windows. Like the OP, I didn't find these helpful but others apparently have.
Edit - These Stack posts host a good discussion of the various options people have found helpful:
https://superuser.com/questions/308135/how-can-i-improve-font-appearance-in-google-chrome
Jagged and choppy Google webfonts in Chrome and Firefox on Windows
PS - #user2864740 In my opinion, the various CSS suggestions (#FontFace, -webkit-text-stroke: 0.25px, etc) do constitute a coding fix.
So tired to search solution..
I use PHPStorm IDE for my php projects and one trouble just makes me crazy.
Editor fonts (editor, don't care about interface) looks horrible. I've tried on different distributions and different DE but result is always the same :(
There are screenshots to compare Kate and PHPStorm fonts. I know that PHPStorm is an JAVA application and it uses different font hitting engine, but.. Eclipse is an JAVA app too, but has pretty nice fonts.
PHPStorm fonts on both Windows and OSX looks like other system fonts. Smooth and readable.
Is there way to fix this font issue before my eyes will explode..?
Thanks.
Following the PhpStorm issue, here is what I added to phpstorm64.vmoptions (that I have installed in /usr/local/bin/PhpStorm/bin/):
-Dswing.aatext=true
-Dawt.useSystemAAFontSettings=gasp
-Dsun.java2d.xrender=true
I also did the trick of opening the font in FontForge:
Ctrl+A (select all chars)
Hints -> Clear Hints
Hints -> Clear Instructions
File -> Generate Font
I put it in ~/fonts/
I am running Ubuntu 12.10 and after all that, everything looks quite great (I did it for Ubuntu Mono).
The only problem I noticed is that -Dawt.useSystemAAFontSettings=gasp leads to great editor font rendering, but poor rendering for menus and other stuffs. Whereas -Dawt.useSystemAAFontSettings=lcd gives awesome font rendering for menus, but less good font rendering in the editor. So try both and pick the one you prefer.
Update: on Ubuntu 13.10, I have no problem anymore.
This is Linux specific issue, you can find a lot of information on this problem here. Check the comments for various suggestions and workarounds.
Here is what you can get with just a different font:
You can install infinality patches and patch OpenJDK to make it use freetype for fonts rendering.
Here are links about installing infinality and patched OpenJDK for Ubuntu-based distributions:
http://www.webupd8.org/2013/06/better-font-rendering-in-linux-with.html
http://www.webupd8.org/2013/06/install-openjdk-patched-with-font-fixes.html
And here is my screenshot of PHPStorm running on Fedora 20 with infinality and patched OpenJDK:
Try adding -Dawt.useSystemAAFontSettings=lcd to bin/phpstorm.vmoptions
Try Settings -> Editor -> Appearance -> Use anti-aliased font
The best solution I've found is to use FontForge.
FontForge it's a linux application which allows you to edit some font preferences.
Just open ttf font within app.
Press ctrl+a to select all chars. Then choose from menu Hints -> Clear Hints. Then Hints -> Clear Instructions. And last File -> Generate Fonts. Just save the new font as new or replace existing and try to use this font with PhpStorm. Looks not ideal but much better than before.
Also I've noticed that fonts on a dark background looks pretty good in Linux
Comparing NetBeans and PhpStorm side by side on my Debian-Squeeze box and I found NetBeans looked much better even when the same font and font-size was selected. The difference was that PhpStorm had bolded most of the code. After going through the editor configuration and getting rid of all the bolding the editor looks much better now.
Monospaced with anti-aliasing looks good to me for WebStorm.