A website I'm working on is using a custom embedded font that newer versions of Chrome on Windows don't seem to like. Instead of whitespace, weird white rectangles show up. Removing the custom typeface fixes the problem but that's hardly an acceptable solution.
Screenshot:
Does anyone know how Chrome interprets whitespace so that I can fix the typeface?
Turns out the typeface didn't define the Unicode whitespace character (0020). All the other browsers substituted the missing character for whitespace, except Chrome. Fixed by editing the font and adding the character.
Changing the CSS propety letter-spacing to something other that the default value (normal) may produce this behaviour.
Related
I'm having problems with some Unicode character (🞻) not showing on iOS.
I have this line of code <p><a class="title" href="index.html">🞻 Luiso Vázquez</a></p> using the HTML entity of the character.
It looks good in desktop, but when it comes to Chrome on my iOS device it appears as an outlined square.
Is there anything I can do to solve this?
Thank you in advance
iOS's font doesn't cover the character you're trying to use. To fix this, you can either
Use a web font
Use an image of the character
Use a different character
Chrome for Windows (v58) seems to add a glyph at the end of a h3 heading.
This square is also seen in the inspector but not in the source code.
It seems like Chrome isn't rendering the font completely as it should?
I'm using TT Hazelnuts from myfonts here.
There is no character missing from my line so doens't seem to be a special char issue or something.
The font is used throughout the site but it seems to only happen on some headers. Also other browsers don't have problems displaying the text correctly.
Changing text-rendering settings in CSS doesn't make a difference.
The site can be found at http://dev.everywhere.consulting (until is goes live)
I have been able to fix this by copying the text out of your editor, pasting it into the URL bar in Chrome on Windows (this will show you the strange square glyph), delete the square glyph there in the URL bar, then copy the text back into your editor.
Oddly enough, even source control will recognize the change but it won't appear to look any different.
Here I am doing it: https://i.imgur.com/Hr2s08j.gif
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.
Here's a fiddle with some Unicode characters.
<p>★★★½☆</p>
Here it is rendered in Safari, looking as expected:
Here it is in Firefox:
I badly need Firefox to look like Safari. What exactly is going on here, and is there anything I can do about it?
Those characters aren't present in the font you're setting in your stylesheet, so the browser does fallback to some font that does have the characters. This fallback is done on a character-by-character basis, so different fonts can ed up being used for different characters. Specifically, I strongly doubt Times New Roman has those star characters.
I suggest setting a font that actually has the characters you're using in your stylesheet.
I had the same problem with © (copyright character) and I just wrapped it around a span tag and then changed the font-family and font-size attribute as suggested in the answer by Boris Zbarsky, and it worked perfectly.
I have a problem with the site http://www.kotoki.ru . If you go to the home page in IE6 or Google Chrome, then we can note from the top margin (which is not clear where did) as soon go to the page http://kotoki.ru/moony/ margin disappears. Why is this and how to get rid of it on the main page kotoki.ru ? I tried to solve the problem himself, using firebug, but nothing succeeded.
Change the encoding of your index file to UTF-8. The empty line at the top is there because of the UTF-8 byte order mark being rendered in the screen.
If, in Firefox, you change the encoding to "Western ISO-8859-1" you will see the same margin with the UTF-8 byte order marked being rendered in the screen. Now in Chrome and IE6 the actual characters aren't there, but the margin is, so somehow the browser thinks that your document is not UTF-8 and renders the byte order mark.
Also a thing I noticed is that one of your meta tags has attributes with single quotes ', which is not allowed in XHTML, attributes should have double quotes ".
In firefox there is no problem with either margin, however it could be the way you've used the CSS, I would suggest having a reset CSS that runs before you main stylesheet.
http://meyerweb.com/eric/tools/css/reset/
It helps reduce browser inconsistencies, hope this helps.