I'm trying to display the heart ♥ Unicode character (U+2665 BLACK HEART SUIT) in this jsfiddle.
Even though I've specified the Droid Sans font, the different browsers are displaying the same character differently. So, I'm assuming that the Droid Sans font doesn't include the ♥ character and the browser must fallback to some other font to display this character. But how does the browser determine which font to use for Unicode characters; as it turns out (from screenshots) that it's not operating system specific as Firefox and Chromium both on Ubuntu display it differently; and also it is not browser specific as Firefox displays it differently on Ubuntu and Windows 7.
So my questions are - How does a browser determine which font to use to display Unicode characters; how can I find out which font is being used by the browser to display Unicode characters; and how can I ensure a consistent look cross-browser?
PS: (Firefox specific) Even though Droid Sans doesn't include the ♥ character, Firefox displays it as in screenshot only when the selected font is Droid Sans. For any other font, Firefox picks up the DejaVu Sans font to display the ♥ character (on Ubuntu, confirmed by hit and trial).
The Droid Sans font does not contain U+2665 BLACK HEART SUIT, so declaring the font is rather irrelevant here. I cannot reproduce the observation in your “PS”, so I’m not trying to explain it.
(A quick way to check character coverage in a font is to download and install the LastResort font. It contains a generic, easily recognizable rendering for all characters, so by using font-family: foo, LastResort on your test text you will quickly find out whether a particular character exists in font “foo”.)
The use of fallback fonts is browser-dependent. Browsers may have settings for this. But the point is that you, as an author, cannot know what happens on other people’s browsers, when your characters cannot be found in the list of fonts you specify (as installed, if installed, in the user’s computer).
Related
I offer a team calendar via Google Calendar to our sports club. It contain all match appointments for several teams and sports (like soccer, tennis, dart...).
I put Unicode icons at the beginning of the subject like a dartboard and a house for a dart match at our home location and a car for outside.
Like this: 🎯🏠 DC Flight Control - Team Dart Donkies
On Smartphones the icons appears as a colored image.
In browsers on a Win7 system as a solid black icon.
On my Win10 system also as colored image.
Same Google-Account, same view, same Google-Settings...
Is this a windows depending thing? Anybody can explain?
It's a font-depending thing
Windows 7 was so old and existed long before emojis came into existence and became common, therefore it doesn't have the appropriate font to display the colored emojis. And even if you install some newer fonts then it still can't render the colored characters because its font renderer doesn't support such a new feature. Initial support for color fonts was added since Windows 8.1, but only fonts with COLR/CPAL tables. Other colored font formats were later supported in Windows 10
An update for the Segoe UI Symbol font in Windows 7 and in Windows Server 2008 R2 brought a subset of the monochrome Unicode set to those operating systems. […] Windows 8 and higher supports the full Unicode emoji characters through Microsoft's Segoe UI family of fonts. […] As of Windows 8.1 Preview, Segoe UI Emoji font supplies full-color pictographs
https://en.wikipedia.org/wiki/Emoji#Microsoft_Windows
The same thing occurs on Linux where only a few modern distros have emoji support by default. Ubuntu has only included colored fonts since version 18.04, which means if you use the young 2-year-old Ubuntu 17.10 you'll see the black characters
Some applications like Firefox use their own font renderer and therefore can show colored emojis even on non-supported OSes. For example Firefox can display those characters on Windows 7 and Linux but Chrome and IE can't (not sure if Chrome was updated to support that or not):
Added a built-in Emoji set for operating systems without native Emoji fonts (Windows 8.0 and lower and Linux)
Firefox 50.0 release notes
It's also possible that someone hates colored characters and disable it completely
I want to make a fallback for my icon font. For example, for my beautiful icon font check mark I use Unicode check mark equivalent:
.icon-checkmark {
&:before {
content: "\2713"; /* Unicode Character 'CHECK MARK' (U+2713) */
}
}
My icon font has character with code "\2713" also. If my icon font fails to load, user will see Unicode check mark; if icon font loads successfully, user will see icon font's beautiful check mark.
I'm searching for Unicode character equivalents for «email», «save» and «print» entities. Are there any or similar in Unicode tables? I have searched on http://www.fileformat.info/ but with no luck.
(I have found only an «email» character — http://www.fileformat.info/info/unicode/char/1f4e7/browsertest.htm, but it does not work in Chrome 28 (it works in all other browsers however :).
Here's some ideas. I have not tested them on any browsers except Firefox on Linux.
Email: ✉, Unlikely:
Print: ⎙
Save: ↓, ▼
Edit: 💾 \U0001f4be could be used for saving since Unicode 6.x
I was also looking for save (floppy disk) symbol.
💾 symbol (mentioned in #Dark Falcon answer) is colored and not adjustable with its adjacent text colors.
I finally got 🖫 from graphemica.com
We can adjust it in any color by CSS color property.
🖫 white hard shell floppy disk for save (U+1F5AB)
✉ print screen symbol (U+2399)
⎙ envelope for email (U+2709)
Your question is actually two-fold: which Unicode code-points are useful for your purpose, and which Unicode code-points are covered with common font installations.
And it raises a new question: why do some programs (Chrome on Windows?) not show correct glyphs where other programs can?
Regarding the first two questions: as you can see, these days some really useful symbols just don't work on many systems out of the box.
Regarding the last question: I have no idea, but some insights on Linux:
Many programs (including Chrome) end up using fontconfig via one way or another. That library is responsible to find the fonts useful to display certain "text". At a higher level, the rendering is done with a mix of fonts, because for more challenging (web page) text there will always be a situation where one font won't cover everything there to display. Might the reason be that another style is requested or a code point is not covered.
So if Chrome on Linux does not show one thing or another, install fonts which have those glyphs (in a way that integrates well with fontconfig-configuration).
I have no idea what drives font-mixing on Windows.
The character in question is ಠ (U+0CA0; ಠ). Here are three screenshots:
Chrome 17 for Mac
Firefox 7 for Mac
Firefox > 4 for Windows
All browsers I tried had UTF-8 as encoding. Here it is copy-pasted : ಠ_ಠ, but I have no idea how you are seeing it.
This is probably due to the different platforms and browsers having different default fonts and font implementations.
The font-family on SO is:
Arial,Liberation Sans,DejaVu Sans,sans-serif
So different fonts will apply on different platforms.
In your Mac examples, the different browsers display a "missing" glyph differently - Chrome with a simple square, FF with the hex Unicode of the missing glyph rendered within the box (in this case 0CA0).
The glyph is not covered by the font used by the webbrowser to display the page which is either the browser default font or the font specified by CSS on the page. You need to make sure that you specify a font by CSS which has most likely guaranteed this glyph in all environments. Arial, for example.
This problem is not related to the character encoding used. A problem in the character encoding used would rather have resulted in Mojibake, not in empty boxes or boxes with hexcode representing the Unicode codepoint which basically identify an unavailable glyph in the font used.
What you posted does not contain U+3232 PARENTHESIZED IDEOGRAPH HAVE “㈲” but a three-character sequence U+0CA0 U+005F U+0CA0, i.e. LOW LINE between two KANNADA LETTER TTHA characters. I don’t know what happened and where. Posting a URL might help.
There are differences in rendering across computers due to different font repertoires. The first two renderings in your screenshot indicate lack of glyphs, i.e. no font in the system contains the character U+0CA0.
Firefox and Chrome (unlike IE) tend to scan thru all available fonts to find the character. But rare special characters often have unsatisfactory implementations in fonts, so for best results, check out the list of fonts supporting the character and specify them in your font-family declaration in order of preference. This also helps poor IE to find a suitable font when available.
If the character you want is really U+3232, then check out
http://www.fileformat.info/info/unicode/char/3232/fontsupport.htm
It most probably does not cover all fonts, since new fonts emerge. But for this character, Arial Unicode MS is probably the font that will be used in the great majority of browsing situations – and if it is not available, an indicator of missing glyph is seen.
I installed a custom font however, my app runs on two languages. I noticed that the custom fonts work with English but not with non-English. How can I overcome this?
You need to choose a custom font that includes "glyphs" for all of the special characters and punctuation that are needed for the language you are using. If the custom font you have is missing these extra glyphs, then you can either edit the font in a font editor such as Fontographer to add the missing glyphs (this requires drawing them in or copying parts from other letters), or finding a new version of the same font that includes the glyphs you need.
You can see the missing glyphs by opening a font that has these glyphs in the "Font Book" program included with mac os x. Then you can open your custom font and compare the two to see what's missing.
Also keep in mind that you usually need a custom license from the font owner to include fonts in your application.
I was wondering if there is a built-in font for Japanese kana in the iPhone OS?
I was wanting to display kana characters and figured it would be easier to generate them in a UILabel as text versus creating a .PNG and display them in a UIImageView. I would want this to be available to non-Japanese iPhones/iPods. I'm not 100% aware if there are differences in the localizations of them as I could not find any of this info in the Dev. Center. Thank you for our time!
Yes, there's a font which contains Hiragana, Katakana and Kanji. I'm not sure if there's a way to specify the style of the font though.
You can type Japanese straight into an 'NSString' and set the label text, it will show up no problem.
**Edit: ** I found this list of fonts on the iPhone, which lists "Hiragino Kaku Gothic ProN W3", a Japanese font. You can find it on the Mac too, it's the standard Japanese font. There's also a bold version. There doesn't seem to be a rounded version, just gothic.
http://www.alexcurylo.com/blog/2008/10/05/snippet-available-uifonts/