Is there a way in HTML or Angular to show some text if an emoji is missing? For instance, the thinking face emoji is missing in Windows 8, so I was hoping to show some alternative text if possible.
The emoji code is π€
My HTML is simple:
<div ng-switch-when="folder"
ng-bind-html="Some text π€">
</div>
I would recommend to use #font-face to import a font that you know contains the required unicode characters. Then, you can either use that font for all of the affected paragraphs, or just for the "emojis" by using the unicode-range descriptor.
Example:
#font-face {
font-family: 'Someemojifont';
src: url('some-emoji-font.otf');
unicode-range: U+1F914; /* thinking face */
}
I understand that this isn't an exact answer to the question at hand, but it might still be a valid solution to the problem that motivated the question.
Related
I am using 1st-time #font-face and facing some issue that my form label need two languages (1) English and (2) Hindi
I want the content of the text box in Hindi instead of the English alphabet.
For Hindi font I made below CSS added external CSS font but it's not coming on my form, then I called my class into my HTML but HTML is taking junk values, I don't know where I doing some mistakes please suggest me a solution.
#font-face {
font-family: hindi !important;
font-style: normal;
font-weight: 400;
src: url('file:///C:/Users/Tapas/Desktop/java%20script/es6/Kruti_Dev_010.ttf');
}
.lang-hindi {
font-family: hindi !important;
}
<p class="lang-hindi"> kaise ho</p>
I am expecting the Hindi alphabet as an output but it's showing only the English alphabet, can anyone please help me with the solution.
go to this site: https://www.web-font-generator.com/
upload your (Kruti_Dev_010.ttf) generate the web font
download generated font there will be CSS file in download files along with .woff, .svg, .eot and .ttf files as well
copy CSS style and correct file paths then use it into you web page
To use kruti dev font you cannot type the text like 'kaise ho' you need to use hindi keyboard layout to type -
so for example if you want to write
then you will in your html you will write - 'lkoZtfud izU;kl efUnj Jh egkdkys'oj '
You can better use Google Fonts, https://fonts.google.com/
Select your font over there, and add this to your web-page.
The answer you are looking for is a bit difficult but you can write whatever your desired text using google font and it will work on all browsers.
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";
}
imagine that you want to design a website that learns English to Iranian people (Persian (Farsi) language) . English and Persian (Farsi) doesn't have any similarity in alphabet because Persian is RIGHT TO LEFT and English is LEFT TO RIGHT and completely are different . i didn't find any tags to set one font for all Persian (Farsi) words and other font for all English words . for example set B-Nazanin for Persian and set Times New Roman for English automatically that don't need to define font for every word every time . just define once these fonts . what can we do ?
thanx
One possible option is to give a lang="fa-IR" attribute/value to the <html> or to any other elements within the document when the website is shown in persian language.
Hence you can override CSS declarations by using [lang|="fa"] selector.
For instance:
[lang|="fa"] p { font-family: "B-Nazanin"; }
<html lang="fa-IR">
<p> Ψ³ΩΨ§Ω
Ψ―ΩΫΨ§ </p>
</html>
Or:
p[lang|="fa"] { font-family: "B-Nazanin"; }
<p>Hello World!</p>
<p lang="fa-IR">Ψ³ΩΨ§Ω
Ψ―ΩΫΨ§!</p>
you can use the following link for this purpose:
Display text with two language in webpage with different fonts with font-face at rule in css
#font-face { /* Persian Font */
font-family: 'MyFont';
src: url(Fonts/BYekan.ttf);
unicode-range:U+0600-06FF;
}
#font-face { /* english font */
font-family: 'MyFont';
src: url(Fonts/ALGER.TTF);
unicode-range: U+0020-007F;
}
Usage:
body{
font-family: 'MyFont';}
tip: for different languages you can use different "unicode-range".
using style content by language in HTML is to use the :lang selector in your CSS style sheet. ex :
:lang(ta) {
font-family: Latha, "Tamil MN", serif;
font-size: 120%;
}
and dont forget use lang in you HTML code
<p lang="en">Ceci est un paragraphe.</p>
If you really want to use two different fonts for two different languages, your options are:
1) Use some markup that distinguishes between the languages. This could be a class attribute or (more logically, but with slightly more limited browser support) a lang attribute. Of course, you would use this for the language with smaller frequency. This is a lot of work of course. Depending on content generation system, it might or might not be automated.
2) Select the fonts so that the primary font does not contain glyphs for characters in the other language. For example, if you set * { font-family: foo, bar } and foo contains Latin letters but no Arabic characters, foo will be used for English and bar for Farsi. Punctuation characters would still be a problem. More importantly, it will be hard to find such fonts.
3) Use CSS code that selects font family by Unicode range. I wonβt go into details, since this approach has too limited browser support to be practically useful yet.
However, it seems that you are trying to create a problem rather than solve one. By typographic principles, the same font should be used for copy text if possible. You should select a font that is suitable for both English and Farsi, or better still a list of such fonts (since no font is available on all computers), or a downloadable font of that kind. Failing that, you might select two fonts, or two lists of fonts, carefully selected, so that you list them both or all and browsers will use them in a natural way: using, for each character, the first font in the list that contains it.
use B-Nazanin or others for persian content and use Open sans for english contect.
If you want to set B-nazanin for persian and set open sans for english, try this code in css:
body{
font-family: "Open sans","B-nazanin";
}
If I understand your question correctly, you will mix Farsi and English on one web site.
Assign two classes, perhaps "farsi" and "english" with appropriate font-family declarations. Then put the Farsi text inside <div class="farsi"> and the English in <div class="english">.
Edited to address mixing languages: You put the <div> around the primary language and use <span> for words in the other language.
I don't think there is an easy way to finely mix languages with different alphabets and even writing directions. Perhaps you can use a macro in your HTML composition tool, or something, to accomplish adding the necessary tags.
I used Icomoon to create a special glpyh for a logo so it will always display in emails, but I cant figure out how to get it to display... I linke the font in my CSS by using
CSS:
#font-face {
font-family: "Cog";
src: url(http://oddmachine.com/links/Cog.ttf) format("truetype");
}
The code I recieved from icofont was U+e600
HTML:
<span style="font-family: Cog;">&#e600;</span>
Can anyone help me out here?
Im pretty sure you didn't use the url correct. Try
src: url('http://oddmachine.com/links/Cog.ttf') format("truetype");
My bad. I was thinking I could use a character code to insert the Icon, but rather I had to create a class and use that to display the character. I was searching in the wrong places the first time through.
If you only have one glyph in your .ttf you might want to try including it as a data uri rather than making a request #font-face
Check out this page with some explanation.
https://css-tricks.com/data-uris/
If you're including the entire font-set then I wouldn't recommend doing this, as it will make your email so large it will truncate some clients.
I have some custom icons that I want to use as a webface font:
However, I can't seem to get them displayed.. All I get to see is the corresponding letter ('a' and 'f'). As shown here You'll also see the working example of the font 'socialico'
Use #font-face In the past I had lots of troubles with font-face but if you type it out right it works fine:
#font-face {
font-family: 'Custom Font Name';
font-style: normal;
font-weight: 400;
src: url(linktofont.com/font.ttf) format('truetype');
}
Replace "Custom Font Name" with what you would like your font to be named when using CSS. and replace "linktofont.com/font.ttf" with the path to the font.
EDIT
Sorry, I read that wrong, I found the problem. If you look at your #import
#import url (http://pastebin.com/raw.php?i=sc4rCApa);
You have a space between "url" and your path, so reaplace it with:
#import url(http://pastebin.com/raw.php?i=sc4rCApa);
I had the same issue - and all my syntax was correct. I was instructed by a friend that it may be the font itself that was broken or incorrect. Here's how it was resolved:
(1) Used original font downloaded from fontfabric.com
(2) Went to www.fontsquirrel.com to generate a new font kit... including the css
(3) Uploaded fonts generated from FontSquirrel
(4) Replaced my CSS with the css generated from FontSquirrel for the #font-face section
(5) Updated the name of the font that is called for later in the CSS
and that was it.... worked like a charm!