When I save a graphic as SVG and then edit it in Figma using svg(), it converts the text to vector for me. To fix I'm using the svglite library. This works, but only if I use Arial as the font.
I instead have my own font that I import into R with showtext specifying the path to the otf file (extrafont doesn't work), but if I use this then it becomes a vector again. How can I fix?
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 am converting some custom icons to web fonts (for internal use only) and I was able to use a local client tool to export to the various font formats (woff, eot, ttf, svg) needed for each icon.
I am using the character map utility in Windows to see the Unicode value for each icon. For example, an airplane icon I have has a unicode value of: U+0021 (Exclamation Mark).
So, now, in my CSS file, I am using code like so:
.myIcon-airplane:before {
content: "!"
}
This outputs an airplane icon as expected.
However, is there a way to use the unicode value (ie, U+0021) instead of the exclamation mark? Or, what's the correct way for me to map my icons using the CSS content key?
Unfortunately, I can't use a public tool due to the proprietary nature of these icons.
Use the backslash escape character followed by the unicode value, like so:
.myIcon-airplane::before{
content:"\0021";
}
<p class="myIcon-airplane"></p>
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.
At the moment I am using .png images for my icons. I want to convert them to font-icons and use them instead. What I am doing is converting the images to SVG and then importing them in Icomoon, but all I get are blank fields. What am I doing wrong? Are there any requirements that I am missing?
I had the same problem and it is the paths in style.css file you got from Icomoon, correct them and it will be okay.
I'm using icomoon.io to convert some SVG files to fonts. The SVGs are graphics, not letters. I know this can be accomplished with JavaScript, but I'm wondering if there is a simpler way to avoid FOUT (flash of unstyled text which occurs before the #font-face file is completely loaded).
Are there character codes I can assign to my symbols that will be rendered as blank in case the browser temporarily uses a fallback font?.
About avoiding FOUT have you tried using a DATA-URI approach for loading the font:
http://pagesofinterest.net/blog/2012/08/css-only-fout-prevention/
Also have you tried separating the #font-face embedding it in another css file and load it before the rest of the CSS in which you actually use the custom font?
Ps. For converting SVG to font-icons I usually use Glyphs. http://www.glyphsapp.com/
It allows you to map each single char with your own SVGs and position / rescale them etc.