I try to add an Emoji (♥) to my HTML Code and show it with Chrome.
<p>♥</p>
The heart is showing by the old Unicode Version 1.1 and because of that it is black:
How can i add the Emoji and show it in this new version?
The code point for that emoji is U+2764 — HEAVY BLACK HEART. The ‘black’ refers to pre-emoji times, when this character was filled up (instead of only an outline).
You can append U+FE0F — VARIATION SELECTOR-16 to explicitly specify the colored version. U+FE0E will specify black/white:
U+2764: ❤
U+2764, U+FE0E: ❤︎
U+2764, U+FE0F: ❤️
The results are probably browser and system dependent, and dependent on what fonts are used. For me (Firefox / Windows 10) the first two above are black, while the third one is red.
Well I suppose it depends from the font you are using. You should find a webfont that is containing the emoji in the style you want and apply it to your page.
If you do not know web fonts take a look to https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts
Related
The context
I wrote a home dashboard which, among others, provides a visual indication of the likelihood of rain in the next hour. If rain is expected, the 💧 symbol is displayed (with Open Sans), otherwise it is styled with filter: opacity(10%);.
In terms of code (HTML, CSS, Vue.js), it is displayed via
<span class="drop" :class="isDrop(horaires.first.rain, 2)">💧</span>
The dynamic class is calculated by
isDrop(rain, level) {
return rain >= level ? "full" : "empty"
}
and the class empty is
.empty {
filter: opacity(10%);
}
(the class full is not defined yet)
The problem
The drops look significantly different on my development environment (Windows 10, Chrome or Firefox)
and the actual dashboard (Raspberry Pi with Debian, Firefox)
Where does this discrepancy may come from?
the source of the page is the same in both cases
the font used on the page is explicitly loaded via #import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800');
not only the filtered version is different (visoble in one case, invisible in the other) but even the non-styled drop looks different - despite being rendered with the same font.
That is because the font you use (Google Open Sans) doesn't include all the unicode glyphs, and more importantly for you, it doesn't include emojis.
So when the browser encounter these glyphs, it will fallback to one available on the system, and different browsers may use different order for choosing which font to use and you may indeed have different font used to represent the same glyph even on the same computer. However, you may be almost sure that different OS will have different fonts, and thus different rendering for these glyphs. Most modern browser's dev-tools allow you to verify which font are being used, check it to be sure which one are toggled on your system.
The solution is to use a web-font which does include these glyphs.
Google has a Noto font which does handle only emojis, Noto Emoji, but the color version is 8MB for only these emoji glyphs!. Saying this so that you understand it's not an easy thing to include these glyphs in any web-font.
There are other web-fonts that seem to exist, but all the free ones I can see are monochrome, so here I'll use Google's one for the example.
#font-face {
font-family: "NotoEmoji-Regular";
src: url("https://cdn.jsdelivr.net/gh/googlefonts/noto-emoji/fonts/NotoEmoji-Regular.ttf") format("truetype");
}
body {
font-family: "NotoEmoji-Regular";
}
💧
If you only have a small set of these emojis you'll use, you could probably make a fork of Google's one or of an other open font so it includes only the ones you need (and be lighter).
Or alternatively, if you have a good designer, you could make your own set of emojis and use a service like icomoon et al. to make your own font based on svg graphics.
Each browser has its own set of emojis. you can see diffrent emoji set here.
if you want an icon to be displayed the same way in every browser, you sould create an icon set and use svg.
I'm trying to figure out why characters like this : 👉 show up like empty boxes. They are unicode characters though and charset is utf-8.
Can it be a font problem which doesn't have a glyph for that? Any ideas?
Details: Html page, i use firefox 16.0.1, Windows 7.. Page like on this post i dont see this glyph either
Thanks
The character which you've there is the Unicode Character 'WHITE RIGHT POINTING BACKHAND INDEX' (U+1F449). On that page, you can find a list of known fonts supporting the character behind the link Fonts that support U+1F449.
Font
LastResort
Segoe UI Emoji
Segoe UI Symbol
Symbola
Neither of those fonts is been used here on stackoverflow.com, so you'll also see an empty box.
If this occurs on your own website, and you'd like to fix it, then you'd need to supply a supporting font along with the webapp by CSS #font-face, or in this particular case perhaps better, look for a CSS based icon library such as Font Awesome. The <i class="fa fa-hand-o-right"> comes very close with this character.
The character U+1F449 was added to Unicode in version 6 in 2010, and it generally takes about ten years from the adoption of a character into Unicode before it is widely supported in fonts.
The few fonts that contain it now include Symbola and Segoe UI Symbol. If you have either of them installed, you’ll probably see it; otherwise not. Segoe UI Symbol is shipped with Windows 8 and apparently with (at least some variants of) Windows 7, though the Windows 7 version may be limited – an update is available from Microsoft. Symbola is a free font, so you could in principle use it as a downloadable font (via #font-face), but its file size is rather large.
Web browsers are supposed to use fallback fonts, if the fonts specified for an element do not contain a glyph for some character in the content. Firefox generally implements this will, IE does not, especially in older versions, so if you use the character on a web page, it is best to wrap in an element of its own (usually span is used for the purpose) and set the following on it in CSS:
font-family: Segoe UI Symbol, Symbola;
But this will as such (without #font-face) work only for people using computers that contain one of the fonts.
Missing font characters will usually be substituted with other fonts, and UTF-8 should be able to display all unicode characters. I suspect that the encoding of your file (how it is saved by your editor), does not match the declaration in the meta tags of your HTML page.
You can check your page with this W3-checker, it can possibly give you hints about the problem of your page.
EDIT:
You are right, it's not an encoding problem, the number of the character has such a high number, that the "normal" fonts do not support it. Maybe you can use one of those ☛ ☞, otherwise you would have to use a web font, and fonts with full unicode support can be quite large.
i want to design my own video player. I want to add this special character as a "volume"-button: 🔉 http://www.fileformat.info/info/unicode/char/1f509/index.htm. But it always shows a weird rectangle with the number 01F509.
Whats wrong ?
greetings
When you see a weird rectangle with the number 01F509, it means that the browser has correctly recognized the character but cannot display it due to lack of glyph for it. Either the system has no font containing a glyph for the character, or the character is unable to use such a font, due to a browser bug. For generalities, see my Guide to using special characters in HTML.
The Fileformat.info page cited has a link to a list of fonts that support the character. The list is short: Quivira, Segoe UI Emoji, Segoe UI Symbol, Symbola. (LastResort is not a real font.)
Segoe UI fonts are proprietary and available only in relatively new versions of Windows. Besides, there fonts exist in several version, and this character seems to be a rather recent addition.
This means that you wold need to use Quivira or Symbola as a web font (downloadable font). If you choose to do that, use e.g. http://www.fontsquirrel.com/ to generate the font files and the CSS code for using them. Note that both Quivira and Symbola rather large fonts, so using them just to get one glyph is a bit disproportionate.
At this point, it is rather obvious that some other approach is most probably better, e.g. using an image in sufficient size and reducing it according to font size by setting its height in em units.
To avoid encoding issues, try including the character in your HTML code using the hexadecimal entity notation: 🔉 then make sure that the font you are using contains this character, else you'll see a rectangle in place of the character.
You may create your own font with the desired character using tools such as http://icomoon.io
Also note that some browsers have issues displaying characters outside of the range 0000 to FFFF (plane 0 of the Basic Multilingual Plane (BMP)). I have experienced the issue with Safari on Windows and IE <= 8. So try avoiding this range if you want to support all browsers.
I have a javascript application, that converts text in runes using the Unicode rune chart. The problem is, that some fonts do not contain the rune symbols.
Mozzila Firefox simply finds out the correct font and uses it for runes, instead of Goudy Medieval and Times New Roman. Google Chrome is not capable of doing that and displays black boxes instead of runes.
So my question is:
How can I find out which web-safe font supports these symbols?
Can I find which font does Firefox use at any point of the document?
Re. 1.: Use a character map program. (On Linux, use e.g. gucharmap, where you can search for the character, and by right-clicking on it (and holding), you can see the font used. You can also switch to other (non-default) fonts in the program and see if the character is present in that font too.)
Re. 2.:
Highlight the text whose font-family you want to determine.
Right-click and select Inspect Element.
In the Developer window that should open, on the right hand side, there should be a Rules column with a bunch of CSS rules. You'll usually have to scroll to the bottom there, and somewhere in there you should find the applicable font-family (inherited or custom-specified) list of which fonts to preferably use.
Compare this list (which may be a single item) with the list of fonts installed on your system. The first matching font between that list and what you have installed would be what Firefox is using.
Use a font-manager program (on Linux this might literally be "font-manager") to get a list of fonts installed on your system.
if rune is an open type font ligature, you can view the font's open type features a few ways....microsoft typography has a free tool u can download, install, then right click on an open type font, some new tabs will appear with the usual ones...one of them is properties. click on that guy, it'll have a list of all the features.
you can also use photoshop, i know if you select an open type font as the text in use, you can then view it's open type features. here's some images of exactly how to do it...sorry for the quality, these are from CS4: http://dev.bowdenweb.com/css/fonts/accessing-open-type-features-in-photoshop.html
so that's how you can tell what features they offer. i'm not sure if runic is a feature itself, or just a design term....that said, quick google search and "Junicode" is a medieval font with the "Junicode is an advanced Unicode font for medieval scholars, including the full range of characters for languages written in the Latin script" http://www.filewatcher.com/d/FreeBSD/8-stable/sparc64/junicode-0.7.6.tbz.1331504.html
but maybe your heart is set on your font....i can't find alot about the rune chart, sorry. you can search the entire open type font features list....i know microsoft typography has it listed, as does adobe...but neither are great for searches, and i'm also not a fan of their naming conventions, which confuse me even more.
I have a web app in which a user can change the font family of an input text area in a WSIWYG-kind style. Now, let's say the user inputs some Chinese text in the text area, but selects a Font that has no support for Chinese characters. In my application, I'd like the user to see those nasty squares (or something like that) that are usually shown when the font doesn't support the character. That way, the user would know that the font doesn't support the language and could choose a different one. The issue I'm having is that the browsers (Firefox 17 and Chrome 23) seem to render the Chinese part of the text with fonts (as Arial) that do support those Chinese characters, making the user believe that the font he's trying to use works fine.
Is there a way (I'm guessing through CSS) to prevent this? Is there a way of making the browsers not to be so "nice" for only this time?
Thank you in advance.
As the other answer already explained, the solution is to use a fallback font which includes 'all' unicode codepoints. However the difficult part was to find or built one which doesn't weight a few MBs.
A few years later there is now a more lightweight solution for a fallback font, the NotDef font by Adobe. It shows a box with a cross for 1,111,998 Unicode code points, is only about 22Kb and is using the SIL OPEN FONT LICENSE Version 1.1.
If you don't want to show anything there is also the Adobe Blank font.
You can intercept the font substitution process by throwing in a catchall font, using some equivalent of font-family: userChoice, yourCatchAll where yourCatchAll is a font that has a generic glyph for all characters.
The problem is in finding such a font. The LastResort font distributed by the Unicode Consortium would be ideal, since it also visually indicates the category of the character in broad terms, but its EULA does not seem to allow modifications. It is debatable whether this applies to the construction of web font formats (like .eot and .woff).
The Unicode BMP Fallback Font appears to have more liberal rules of use, but it displays a character simply as its Unicode number in a box (and supports only Basic Multilingual Plane, though it contains all characters that most people ever heard of).