I'm working on a project that requires using a single glyph font to replace the space (unicode 0020) in flow text with a special character. I've got this working beautifully in IE9+, Firefox and Safari, but Chrome is not behaving. Opera looks the same as Chrome but I don't have to support it.
I have a webfont, made using Font Squirrel in the usual way, which just defines unicode 0020 (the space) and I use it in a stack like this:
font-family:'My Replacement Space', arial, sans-serif;
In all the browsers that work, the space is replaced and all the other characters are rendered using arial (or sans-serif) as a fallback. In Chrome, Arial is used throughout and the spaces remain blank.
Anyone recall anything buggy relating to Chrome and something like this?
Many thanks!
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 have a really strange behaviour in Safari. The problem is that I have a string (inside an tag) which has one part of it written in cyrillic (Bulgarian) and the other part written in latin (English).
On all the desktop browsers I have, it's all working good and there are no problems at all. Then I took my iPhone, and I noticed a surprise: part of the sentence is bold (as it should be according to the CSS), and part is normal.
You can see this weird behaviour here:
http://www.buderus-bg.com/bultherm/product/10
What can it be? And why I get this problem only on iOS?
The charset of the website UTF-8. And that field in the database is a utf8_general_ci.
You are trying to display the text using a font that doesn't contain Cyrillic characters (Google's Open Sans with subset=latin), so the browser will need to find a different font to display the Cyrillic text.
Solution: remove the subset=latin bit.
Edit: the fact that it happens only in iOS with Safari is a coincidence. The browser searches for a font that can display the Cyrillic characters, and what it finds is sufficiently different from Open Sans that you can see the difference in thickness. On my desktop machine, I see the difference too.
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.
in Safari 5.1/Windows XP, the unicode arrow in the button element is not shown. <span> is working fine.
<span>▼</span>
<button>▼</button>
Screenshot:
http://cl.ly/image/1T0J1X10141A
fiddle:
http://jsfiddle.net/christianhaller/nTvjU/1/
Any hints to fix this?
further information: IE8 on the same OS has no problems with the unicode character
This is a font problem. It does not exist in Safari 5.1.7 on Windows 7, but I was able to reproduce it in Safari 5.1.7 in a virtual Windows XP. Instead of the triangle character, a small rectangle appears, a common indicator of a missing glyph.
Apparently, on Windows XP, Safari uses some fixed font (seems to be Microsoft Sans Serif) for button elements and fails to look for other fonts when it encounters a character that is not present in that font. Luckily, this can be fixed by specifying a font that does contain it. If you prefer to have button elements rendered in Microsoft Sans Serif in general, it suffices to specify a fallback font in CSS:
button { font-family: Microsoft Sans Serif, Arial }
Quite a few fonts contain the triangle character, so there are many options. And you might wish to make some of them the primary font for button elements, not just as fallback font.
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.