How can I test if a particular web font contains a particular Unicode character? I can't simply include the character in some text, because a browser's font substitution mechanism may choose another font to display the character.
EDIT
This is the best solution I have been able to come up with so far:
First, you must download the LastResort font from Unicode: https://www.unicode.org/policies/lastresortfont_eula.html. (This is a bit tricky - I kept getting "network error", but in the end I succeeded.)
The LastResort font allegedly has a replacement icon for every Unicode character.
Now, let's assume that I want to check if the Google fonts "Pacifico" and "Merienda" contain the Unicode characters F and Ф (Unicode character 0424). I can use this code:
<!DOCTYPE html>
<html>
<head>
<title>Font detect</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Pacifico">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merienda">
<style>
#font-face {
font-family: 'LastResort';
src: url('LastResort.ttf') format('truetype');
}
p.pacifico {
font-family: Pacifico, LastResort;
font-size: 60pt;
}
p.lato {
font-family: Merienda, LastResort;
font-size: 60pt;
}
</style>
</head>
<body>
<p class="pacifico">F Ф</p>
<p class="lato">F Ф</p>
</body>
</html>
This will display thus:
For Pacifico, both F and Ф are displayed, but for Merienda the Russian character Ф is replaced by a default icon from LastResort. So Pacifico contains Ф, Merienda does not.
Now, I don't know if this is a foolproof method, and I don't know if there is a simpler way to do it.
Wakamai Fondue is a tool that will tell you about which characters a font contains. It'll also tell you about any OpenType feature inside the font, and some more details. (Full disclosure: I wrote that tool)
If you want to check it at the client side, I think there's no way around trying to render the character and then check if it's actually been rendered. If you use Adobe Blank as a fallback font you could check if it rendered the character (width would be > 0) or not (width would be 0).
Related
I want to add emojis in a html page, eg. 🇬🇧 but they do not render with the colorized icon.
I tried the follwing
<meta charset="utf-8" />
<body>
🇬🇧
🐑
</body>
</html>
And it does not show the colorized icons of the UK flag and sheep respectively. I as well tried wrapping the emoji characters in a span but it neither works. Maybe is something related to the fonts?
The rendering of the emojis is depending on the font you use to display them. Emojis are just normal characters like the letter "A" and need to be defined in the font you are using on your page. To display emojis correctly, you need to use a font which has these emojis defined and set the <span> (or your whole page) to use that font (with CSS).
Here is an explanation on Emojis. And here is an example on how to use the Google Noto Emoji Color font (free to use) on your website:
1- Download the font (here)
2- Embed it into your CSS:
#font-face {
font-family: "Noto Emoji Regular";
src: url('NotoEmoji-Regular.ttf') format('truetype');
}
Make sure the url has the right path to the local .tff file and add this to your page <style> definition or CSS file.
I am currently trying to make a website in greek.I have set the lang="el".I also use brackets to code.When i use the live preview of brackets which uses Google Chrome everything is fine.When i open the index.html from google chrome without using brackets it's also fine.
The problem is when i try to open it to any other browsers.From greek it turns each letter to weird symbols.
By the way i use the Lato font-family.Tried using only Arial but still symbols appeared but different ones.
Anyone has any idea what's the problem?
html {
background-color: #f0f0f0;
color: #5f5f5f;
font-family: 'Lato', 'Arial', sans-serif;
font-weight: 300;
font-size: 20px;
text-rendering: optimizeLegibility;}
This is how the weird symbols look
For some languages you can just slap text-transform:uppercase and it will work. For greek you have to declare the language in the HTML, so you should add lang="el" to the HTML tag and define the charset as UTF-8 using <meta charset="utf-8" /> .
It will also solve the issue I was having, which is the CSS text-transform:uppercase adding accents to uppercase greek characters.
i'm working on a web site and i want to use persian/arabic numbers. but when i write the number, the numbers shown in english format.
also i tried for this code :
<html lang="fa" dir="rtl">
but it doesn't works for me. please show me a way.
its my web site :
http://follower.siblearn.ir
i wanna change the 2.500 and 5.000 to the persian/arabic format.
You should use Persian or Arabic font family like this:
body { font-family: 'B Koodak',tahoma; }
before that, add some code like this to your html header:
<link href='http://www.fontonline.ir/css/BKoodakBold.css' rel='stylesheet' type='text/css'>
remember you can use your favorite fonts from online or hosted files.
{ font-family: 'B Koodak'; }
on every tag or class you want to apply for numbers
Note: They aren't new. Just "not supported", somehow.
I'm trying to make simple controls for a element on my website, along the lines of a simple "mute" or "not mute" control.
However, I haven't been able to find any fonts capable of handling the newer Unicode symbols, such as the speaker symbols (🔇 to 🔊, or 🔇 to 🔊) which are broken (🔇 🔈 🔉 🔊) even on Stack Overflow, yet still - They can be found in the Unicode character listings and are somehow able to be displayed in my PDF reader and Internet Explorer, but not Chrome.
This is the first paragraph (above), from my perspective, with the characters broken:
Anyway, here's my snippit of the code. (The video controls are in plain view for testing purposes). The actual element has a z-index: -1000 attached to it; used as a video background.
function mute() {
document.getElementById("jsControl").setAttribute ("href", "javascript:unmute()");
document.getElementById("jsControl").innerHTML = "🔈";
document.getElementById("videoPlayer").volume = 0.0
};
function unmute() {
document.getElementById("jsControl").setAttribute ("href", "javascript:mute()");
document.getElementById("jsControl").innerHTML = "🔊";
document.getElementById("videoPlayer").volume = 1.0
};
<html>
<head>
<style>
body {
font-family: [Insert font names and attempts];
}
</style>
</head>
<body>
<video id="videoPlayer" src="..."></video>
<a id="jsControl" href="javascript:unmute()">🔈</a>
</body>
</html>
I've tried different web-safe fonts, such as Arial, Times New Roman and Tahoma and Sergoe UI.
Question: Is there any font that can be used that supports those unicode characters that works on Chrome?
(Even a font that has these remapped onto regular letters like Wingdings will be accepted as they can be attached using #font-face { ... }.)
Also, please don't complain about the broken Javascript (if it is not written correctly) - I can fix that myself. It's the font; text (missing symbols) that I'm worried about.
Update: Viewing the icons in Internet Explorer works fine. Seems to be a chrome-and/or-other-browser sort of issue.
Since you would use just a few symbols in a special context, rather than as text characters, the practical choice is to use images.
However, if you really want to use characters, there is a very limited set of fonts to consider. According to fileformat.info, U+1F507 is supported only by Quivira, Symbola, Segoe UI Symbol, and Segoe UI Emoji. The latter two are proprietary fonts, available only in relative new versions of Windows, and as different variants (e.g., my Windows 7 lacks Segoe UI Emoji and has a variant of Segoe UI Symbol that lacks the character).
Thus, the only way that works reasonably is to use either Quivira or Symbola as a downloadable font, via #font-face. As they are rather large fonts, and you would need to serve them in different font formats for cross-browser functionality, this approach is hardly a practical option (unless you have many other special characters, possibly used in text, that also need such special fonts).
You shouldn't assume the person viewing your site has necessary fonts installed. Instead, you should add an external font. Find a font that has an appropriate licence and contains the required symbols (for example http://emojisymbols.com/), and add it to CSS as with #font-face declaration:
/*
EmojiSymbols Font (c)blockworks - Kenichi Kaneko
http://emojisymbols.com/
*/
#font-face {
font-family: "EmojiSymbols";
src: url('EmojiSymbols-Regular.woff') format('woff');
text-decoration: none;
font-style: normal;
}
.controlIcon {
font-family: "EmojiSymbols";
}
I'm facing this problem,
If opened in IE9 under windows 7, in my pre formatted html block \ is rendered as wong symbol ₩ if courier font is used. If I set Tahoma, e.g. it's ok. In chrome, even if courier is set, symbol is rendered as backslash.
How to fix it?
Edit: code that reproduces this:
<html><head>
<style>
pre {
margin-top: 10px;
padding-left: 7px;
padding-top: 5px;
margin-left: 50px;
font-family: courier;
background-color:#ddd;
}
</style></head><body>
<pre>
Can\'t
</pre>
</body></html>
I cannot reproduce the problem on my Win 7, so I still suspect the reason is that your system has an actual font under the name “Courier” (normal Windows 7 is not shipped with such a font). Either that font is broken regarding the backslash, or it simply lacks it and the browsers picks up the character from another font. In the latter case, that font might be broken.
There are surprisingly many fonts that have a glyph for “₩” U+20A9 WON SIGN where they should have a glyph for backslash. There has been some speculation about the reasons. But the point is that there should be no reason why such a font would be used unless your browser resorts to picking up backup fonts. In that case, IE might have been set to use e.g. Batang Che as the default monospace font – and it’s one of the fonts with that problem.
On the practical side, “Courier” should almost never be used. In systems that have a font under such a name, it is often a bitmap font that looks rather bad especially when font size is changed. Use “Courier New” instead. Or something better, such as
pre, tt
{ font-family : Consolas, Lucida Console, Courier New, monospace; }
As Raymond Chen pointed out in the comments, the browser has likely guessed the encoding incorrectly.
If you want to specify the encoding directly in the file, then you can use a meta tag in the head element of the page, like this:
<meta http-equiv="Content-Type" content="text/html; charset=my_encoding_here">
Where my_encoding_here is actually a string representing the encoding you used when creating the HTML. Common encodings are utf-8 and ISO-8859-1, but you should figure out exactly which encoding your editor is using and make sure you match it.
If you're serving pages like this, then you might choose to specify the encoding in your webserver, which will put the information into an HTML header when it returns the page.