I am trying to make non-monospace fonts work in Suckless's simple terminal. I have an issue with FontAwesome larger glyphs (e.g. with battery glyphs being overlapped by other characters.
I have tried to apply the font2 patch to add FontAwesome as fallback font, it did not improve the situation.
static char *font2[] = {
"FontAwesome:pixelsize=11:antialias=true:autohint=true"
//FontAwesome as font name works in other programs (such as i3blocks)
};
// Note: I have applied the complete patch, not only these lines.
Is there something that I am missing?
Thanks.
You got the names wrong.
static char *font2[] = {
"Font Awesome 5 Free:pixelsize=11:antialias=true:autohint=true",
"Font Awesome 5 Brands:pixelsize=11:antialias=true:autohint=true",
};
Related
I'd like to use colored Emojis ony my new project. Therefore I implemented the newest Noto Color Emoji-Font to my project. My backend is in ASP.NET Core btw.
But now I have a strange behaviour when rendering the emojis on my website, every browser renders it differently, therefore I think my font won't get loaded, maybe?
Edge:
Firefox:
Chrome:
As it should be:
site.css:
/* fonts*/
#font-face {
font-family: "color-emoji";
src: local("Noto Color Emoji");
src: url("./fonts/NotoColorEmoji.ttf");
}
.emoji {
font-family: 'color-emoji';
}
In my view:
<p class="emoji">π©ββ€βπ¨βπ¨ββ€βπ¨βπ©ββ€βπ©</p>
This particular emoji is just an example btw.
Do you have any ideas? I know why I am a backend developer in my job. Frontend is killing me all the time.
To be on the safe side, one should always use fully-qualified emoji zwj sequences.
Instead of:
<p class="emoji">π©ββ€βπ¨βπ¨ββ€βπ¨βπ©ββ€βπ©</p>
try this:
<p class="emoji">π©ββ€οΈβπ¨βπ¨ββ€οΈβπ¨βπ©ββ€οΈβπ©</p>
π©ββ€οΈβπ¨ U+1F469 U+200D U+2764 U+FE0F U+200D U+1F468
π¨ββ€οΈβπ¨ U+1F468 U+200D U+2764 U+FE0F U+200D U+1F468
π©ββ€οΈβπ© U+1F469 U+200D U+2764 U+FE0F U+200D U+1F469
Note the U+FE0F VARIATION SELECTOR-16 right after the β€ U+2764 HEAVY BLACK HEART to form a proper red heart emoji...
You can have a look at the Recommended Emoji ZWJ Sequences, v11.0 web page, or get a full list of all fully-qualified and non-fully-qualified emoji in the emoji-test.txt data file.
basically I used that famous google font called "Thasadith" I used only the "bold" version and its just showing the normal version , I rechecked , used in html , used font weight in css and still the font is just viewed as normal..
You need to load the bold form if you want to use it. If you don't, the browser doesn't know how to render the bold weight and defaults to the closest it has (which is the one you loaded: normal).
In the case of Thasadith, which is available on Google fonts, you need to add :n,b after the font family name in the <link>'s url (or in the #import's url), where n stands for normal and b stands for bold (other available options being i - italic, bi, - bolditalic or specific weights - these depend on font, ranging from 100 to 900. as well as specific weight + i).
Here's a working example with Thasadith:
div {
font-family: 'Thasadith';
font-size: 5rem;
}
<link href="https://fonts.googleapis.com/css?family=Thasadith:n,i,b,bi" rel="stylesheet">
<div>Hel<i>lo</i>, <strong>Wor<i>ld!</i></strong></div>
In the case of Thasadith,
family=Thasadith:n,i,b,bi
is equivalent to
family=Thasadith:400,400i,700,700i
as 400 and 700 are the two available weights.
For more on how to load Google fonts, read their getting started.
So I was casually looking in inspect element, to try to gather an image from a webpage (https://forsvaret.no/karriere/forstegangstjeneste). The creator of the page had linked to the image through the css ::before selector using content: "ξ½"; does anyone know what βξ½β this sign means, and why it have been used ?
This is the Css:
.iconForsvaret-fighter::before {
content: "ξΌ";
}
And the Html:
<ul>
<li><a href="/karriere/forstegangstjeneste/muligheter/........">
<span class="iconForsvaret-tank"></span>
<span>Hæren</span></a></li>
</ul>
Thanks ..
It is the non-printable character symbol. It is used when you are trying to display a character that is not available in the font being used to render the text.
Most likely that specific character is in the range of Unicode reserved for private use and that there is some code which sets the font for that pseudo-element to one which has a font with characters defined in that range.
"ξΌ" usually indicates a unicode character that your browser cannot display. It might very well be some sort of emoji from an iphone that your operating system hasn't implemented yet.
Usually upgrading your OS to the latest version fixes those issues.
"ξΌ" means your font file is missing. when you link you font then show exact font.
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.
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";
}