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.
Related
I have a custom fantasy script which looks like this (just the text portion):
It is a monospaced font built with FontForge. How can I add support for it to VSCode, so I can type in ASCII (like the left side here), and it outputs the random UTF-8 symbol mapped to the custom font in VSCode? So I can then save the file and have it be either a bunch of gobbledygook characters or the ASCII characters I originally typed?
Ideally this could be a plugin, so if you know of an open source VSCode plugin which I could use as inspiration, that would be a perfect answer as well.
I see how to set a custom font in VSCode, but (a) that is globally, and (b) it doesn't necessarily solve the typing problem. I just really would like to know how to do this, not necessarily requiring an answer to implement it.
Recommended UX is to have a "separate keyboard" for it, meaning typing the keys on the keyboard would result in different values. Maybe something like that can be done on a per-file basis?
I just have updated my PhpStorm to version 2016.1 and I have a really strange issue in editor, as you can see in the screenshot, some characters are screwed up.
When I copy/paste the text it is displayed correctly (the text before the require is "dojo"), I have tried changing the file encoding but without success (the file is UTF-8)
Someone already had this problem ? It is kind of annoying. See below my file encoding.
The problem don't seem to be the font (as suggested in comments) because italic is rendered:
It's not a problem with encoding .. but issue with your font. If you look at the screen -- only italic (or italic+bold) text has such problem.
How to check it:
If you select the text and copy-paste it into another editor (e.g. Notepad++ if you are on Windows) .. or even here into the actual Question -- will it copy that mangled text fine (I mean -- will it read "dojo" when pasted)?
Will it display it fine if you try another standard color schema -- e.g. "Default" or "Darcula"?
The issue can be with actual font (corrupted font files; somehow incomplete font data etc) .. or maybe even the with the way how IDE uses/renders it (e.g. font may not have separate "bold italic" style so IDE tries to mimic it and fails).
Either fix your font (re-download and reinstall; look for newer version maybe)
.. or use another font
.. or do not use italic (bold+italic) style
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).
I built a test app. All it does is populate a label on the screen with text and then try and change the font. 90% of the time this works just fine, even when I am using custom fonts that I have imported. However, I have not been able to get Wingdings to function even though I installed it in my resources folder and added it to the info.plist
self.theLabel.font = [UIFont fontWithName:#"Wingdings-Regular" size:64.0f];
I thought maybe it was the name I was using, but I ran a test and found that not only is the family Wingdings installed, but Wingdings-Regular is the proper name. I ran experiments where I switched out "Wingdings-Regular" with other variations and noticed that when I do enter something that is garbage, the size is ignored. Using "Wingdings-Regular" the size is not ignored, but the letters show up normally instead of the Symbols I need. How do I fix this problem?
I am pulling my hair out.
Unicode is required to access the symbols in Wingdings or other symbol fonts. See How to use Wingdings font in Java Swing for more discussion. UIKit and Java are both fundamentally based on Unicode. See http://unicode.org for more details.
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.