When working with Visual Studio, I always see that # character when selecting font family in CSS editor and finally I decided to ask what that is.
Sample image right below :
The Unknown Character http://img341.imageshack.us/img341/5895/cssunknown.png
P.s : It seems like fonts installed only my computer or not general fonts but I am not pretty sure though.
These are fonts that are appropriate for East Asian languages when the text is displayed vertically. The preferred traditional reading direction for Japanese, Chinese and Korean. The glyphs in the font are rotated so that after you create a rotated font, the character displays the right way.
This wikipedia article is excellent, also mentions the #.
Related
no support for Arabic text in a-text component, also all the A-Frame’s built-in fonts doesn't support Arabic.
a-frame v: 0.6 ,
testing in Chrome ,
Mac
You can either:
1. use a custom font, by pointing a url to the .fnt file ( and the .png font file) as described in the documentation. Its done by simply defining
font:urlto.fntfile;fontImage:urlto.pngfile in the text component or primitive.
2. As described in the docs, rendering 2D text is no easy task, so You could make a transparent image containing Your text in arabic.
(2) Seems to be simpler, but it's a pain when You need to change a typo, or sth in the text. I use it for Polish characters anyway.
You will need to generate a custom font from a fontset that contains Arabic characters. In WebGL, we don't get fonts for free, they are converted into glyphs and vertices.
https://aframe.io/docs/0.6.0/components/text.html#custom-fonts
A more recent component aframe-troika-text provides a simpler solution that can render directly from a referenced font file.
https://github.com/lojjic/aframe-troika-text
I cannot get Chrome on OSX to print emoji, is there any css trick or other?
Here are 2 emoji: 👍🇦🇹
When I try to print this page, the emoji space is preserved, but it's white. In Safari printing the emoji works just fine.
Here is a screenshot of the print preview of this page on Chrome:
After a lot of dialog in the question's comments, it seems you have a font rendering issue (perhaps a Chrome bug). I do not think this can be solved with any combination of HTML, CSS, or Javascript.
There is, however, the option to work around the issue by not using a font.
You can use a vector image like SVG to have the same kind of scaling capabilities as a font:
SVG for 👍THUMBS UP SIGN Unicode character
SVG for 🇦 REGIONAL INDICATOR SYMBOL LETTER A Unicode character
SVG for 🇹 REGIONAL INDICATOR SYMBOL LETTER T Unicode character
SVG for Thumbs up sign
SVG for Austrian flag
Just link to the SVG as an image and specify its dimensions either in HTML or in CSS as needed.
With a little work, you could automate conversion of user-generated emojis to images by using a dictionary of known images and supplement the misses with the either the SVG or the emoji PNG at FileFormat.Info. They have a list of emojis you could scrape (assuming it's not a violation of their terms of service) for PNGs as well as an SVG for every character (emoji or otherwise) which can be obtained from from just the character code. For example, here's U+1f44d (👍):
http://www.fileformat.info/info/unicode/char/1f44d
It'll be the only SVG link on the page, so you could do this in JS:
var svg_src = fileformat_info.querySelector('a[href$=".svg"]').href;
That said, it'd be vastly preferable to have this ready-made rather than creating from scratch. #pandawan's answer suggesting twemoji looks promising.
Perhaps there is a CSS-only workaround: I've also read elsewhere that you can properly print these characters by avoiding bold (and perhaps all font and text manipulation? perhaps just make the font size bigger?). This may depend on the fonts installed on the client system.
This is due to a rendering difference between Chrome and Safari, I would not named it a bug since I do not believe that the expect behavior is defined anywhere (Firefox has issues rendering your emojis too by the way).
If you want a full and simple emoji support across all platforms you can use twemoji, a small library developed by Twitter for this specific need.
I'm searching for a method to tell the browser to render each glyph rendered with a specific font, e.g. FreeMono, in a bigger font size than glyphs rendered with other fonts. The reason for that is, that I use characters like ᚠ in a website and these glyphs are rendered using FreeMono in Chrome (see inspect element → computed → rendered fonts) and they look always like they're to small to fit the surrounding text. Is there any way I can do that?
You cannot. CSS has no tools for such font-specific tuning, apart from the font-size-adjust property, which has very limited effect, limited browser support, and buggy support.
If you use a character such as “ᚠ” U+16A0 RUNIC LETTER FEHU FEOH FE F on a web page, then it will be up to each browser in each system which font (if any) is used to render it, at least if you do not explicitly suggest some font(s) that contain it. It may be FreeMono, but most computers in the world do not have it. Besides, in FreeMono, “ᚠ” is rather large—taller than uppercase Latin letters. So if it looks too small, the reason might be a mix of fonts.
To make, say, Runic letters match the style of other text, you should try and find a font that is suitable for both—so that you can use a single font, designer by a typographer to make things fit. You would then probably need to find a suitable free font and use it as a downloadable font (with #font-face). It might be FreeSerif or FreeSans; only in very peculiar circumstances would I consider FreeMono, a monospace font, suitable for rendering computer code in some cases and mostly unsuitable for everything else.
First off I apologise for any cringe worthy ignorance, I am a novice.
I'm having some trouble changing the product rating stars to an image of my choice on woo commerce.
I understand woocommerce uses a woff file from the fontawesome pack, I found the plugin.css, located the fontface code for the woff file.
I converted an SVG to a ttf and then to woff and replaced the star woff file with that (keeping the same name to avoid changing code)
But the result is a series of S's.
Totally stuck on this for a few days.
I appreciate any insight.
Thank you
You appear to have replaced the entire font with your new font.
A font is a series of designs (glyphs) associated with different character positions. So a W in Times New Roman looks different to an W in Comic Sans.
Dingbat/icon fonts put arbitrary images in place of letters.
Your new image should be where the S is. As it is not, and there is no character at that position in the font file, your browser will be defaulting to a different font (which, as might be expected, has an S allocated to the S position).
You will probably find that other icons around the site look wrong, because you've swapped out the whole .woff file.
You need to use a font editor that will let you set glyphs in the right place.
I am editing font with fontforge font editor everything is good but in
ligature when i want to make multi word ligature (space between it) don't work on firefox and opera ,it will work with word pad and notepad.
is this bug or limit?
what should i do to solve problem?
note:i am using #font-face css syntax to import font and font is ttf.
Ligature making is an optional feature in an OpenType font. Examples of ligatures are the glued together sets of letters like, fi, ff, fl, ffi, ffl. A common font that has ligatures is Calibri that came as the default font in Microsoft Office 2007.
The font has a lookup table that goes like this:
f i -> fi
f l -> fl
f f -> ff
ff i -> ffi
ff l -> ffl
As you type the letters on the left hand side of the equation, the ligatures shown on right go and replace the currently displayed character (whether a single letter or an already formed ligature). Type 'difficult' inside Notepad using Calibri in some large size to see this happen. Notice that a ligature has multiple cursor positions inside it. You can stop automatic ligature formation by intervening the hidden character ZWNJ (Zero Width non-Joiner, u200C, HTML-‌) between letters.
Firefox 4 forms ligatures without the aid of CSS / SVG. MS Word can do ligatures starting from version 2010 but it needs to be enabled under Advanced tab, AbiWord (freeware) does also support it.
Check out this web site (use Firefox or Safari) that uses ligature feature to show a complex script on top of a transliterated text.
This smartfont has 400 odd ligatures that Firefox and Safari display without effort even after downloading the font.
A concrete example would be helpful, as this question is very unclear.
I assume that the issue is that you are attempting to access ligature features that are not part of the default for the font (i.e. it must be turned on as an opentype feature). CSS does not provide a way to specify opentype features to activate. Sorry.
If it is a logo, or similar, you could simply create the text as an image, either in something like png, or as an SVG.
For a short paragraph, SVG again might be suitable.
If not, then maybe there is a font that supports the appropriate ligature by default.
There's no way to make a "multi-word ligature" work in Firefox; it does not support ligatures (or other types of OpenType rule, such as contextual alternates) across inter-word spaces.
This is a fairly common limitation, actually; the same is true of XeTeX, for example. Inter-word spaces are not treated in the same way as normal printable characters by many text-layout systems, and so the OpenType lookups will not match in the way you expect.