The menu I am trying to create is:
The menu is in Chinese & English. The problem is #font-face isn't practical with Chinese characters as each font is over 5mb. So - I would need to resort to images.
So - my ideas are:
Are there any image replacement techniques that scale?
How can you extract the characters out of the font to make a custom font face?
Thanks,
Robert
Use cufon - http://cufon.shoqolate.com/generate/
It renders the text image automatically in Javascript and is also readable for search engines.
Related
In wordpress when I use a unicode emoji like "π" or others,
wordpress convert emoji character to <img> tag with src="emoji.svg" and alt="π" like this:
<img draggable="false" class="emoji" alt="π" src="https://s.w.org/images/core/emoji/11/svg/1f611.svg">
Imagine I want to use 50 emoji in a text, this is very bad in SEO and for site performance. Is there a way to keep the emoji as unicode? Like here on Stack Overflow and other websites?
Thanks a lot!
There is a great answer here on wordpress development that tells you how to disable the svg styled icons, its this line:
add_filter( 'emoji_svg_url', '__return_false' );
Also check out the other hooks that you might need to fully disable emojis.
Wordpress uses svg emojis for two reasons I think:
Their emojis are more "flat" and therefore look more modern
When being used as images, emojis can have different sizes than the text sourrounding them.
You can try to check this settings - wordpress dashboard > settings > writing > Convert emoticons to graphics
I have no idea how to undo this in WP.
As for 'why' they do it: I would think it has to do with unicode support: it's pretty good right now, but I imagine it wasn't always that way. Images are universally supported by browsers.
Seriously, Iβd rather keep the way Wordpress handle emojis, the reason below:
Windows 7 or below doesnβt have built in emoji fonts, so if it comes to an emoji Unicode, it will show as a black white square or weird plain text in any browser.
This problem is related with operating system, it has nothing to do with browser version.
The worst thing is, you canβt control what operating system your visitors use, and you canβt just block them out.
Wordpress makes emojis to svg images so the low end user will see emojis normally, not perfect, but it does the job.
<img draggable="false" class="emoji" alt="πͺβ" src="https://s.w.org/images/core/emoji/11/svg/1f611.svg">
Take this text as an example:
ππππππΏπππππππππ
If you make an HTML file copy and paste the above text directly in your text editor from StackOverflow, it will show up on the webpage with that font. Why isn't this the standard way for using fonts in HTML and instead most people just use font color when they could simply use ASCII?
For one thing, these specific characters have very specific meanings beyond just the font. See Mathematical Alphanumeric Symbols on Wikipedia and its Unicode chart.
Secondly, presentation and content are separate matters. When the appearance of text has no bearing on the meaning of the text, then the appearance should be controlled by CSS, not the text itself. (Plus, why would you sacrifice all manner of flexibility by hardcoding the appearance in the content itself?)
I am editing a pre-existing site that makes use of icons/glyphs in a multitude of files like eot, svg, w0ff, ttf (I guess for various compatibility). It calls these with the use of the font and a CSS value like this:
font-family: icons_filename;
content: "\e601";
So how would I find a list of the different values of the icons called with "content"?
In other words, I am trying to see what is possible in an undocumented library of icons that don't necessarily have a good list of names.
I also don't understand how the value "\e601" is used or how to look that up in a file. This part of CSS is unfamiliar to me and I cannot find a good explanation for this as most icon tutorials only show how to use a documented library.
Thanks
I believe you're looking for UTF-8 characters. Icon fonts generally override the default font on this universal icon font if they exist. Here's a link to where you can view them.
Adding onto what Chris already said, you should be able to track down which font icon library your template/theme is utilizing. One of the most common examples of these would be Font Awesome.
From the link above, you'll have the ability to go through each icon and figure out which "unicode" to select. For example, "fa-blind" (blind man walking icon) has a unicode of "f29d", which translates to "\f29d" when using it for the CSS property "content"
If your stylesheet is served in UTF-8, you can avoid the need for unicodes (f29d in our example), and directly copy/paste the icon should it be listed on a site for you (i.e, instead of "\f29d" in the content, it'll be the actual fa-blind icon glyph. It'll show up as a blank square in your CSS document, but will render properly when you're on the webpage.)
I might've gone on too long here, but ultimately what you need to do is figure out which library of icons the site is utilizing. We could easily figure it out for you if a link is provided.
I was curious how Imgur was rendering their upvote/downvote arrows:
I assumed they were images, but I found something that I did not expect:
A custom font that contains glyphs for up and down arrows, mapped to the 'o' and 'x' characters, respectively:
Is this method considered acceptable these days? I have never considered using a custom font for something that doesn't semantically map into an alphabet. This approach is not even on my radar of best practices for web design.
I can imagine the reasons for:
Your site uses a standard icon set that can be mapped to single-character codes.
You only need control over foreground/background color for the icons.
You want icons that scale the same as text.
I want to know any specific reasons against using this method.
In particular, I'm looking for answers that address any of the following:
browser/platform compatibility
future maintenance implications
semantics
performance
standards compliance
The only thing I have come up with so far, is that, semantically, it does not make sense to map an upvote icon to the character 'o' and a downvote icon to the character 'x'. And, just to be specific, I'm not talking about keyboard mappings, but rather language mappings, character codes. It seems to me that raster images or SVG are much more preferable alternatives in this case.
I thought of one other possibility: language and encoding compatibility. Would the html lang attribute or character encoding of the page have any effect on the character mappings into the font in the CSS stylesheet (the stylesheet uses 'x' to represent a downvote icon)?
However, I'm certain Imgur has thought all of this through already. So, why am I wrong?
Modern browsers (e.g. IE9 above) support custom fonts.
Even Bootstrap also uses custom fonts for icons, known as Glyphicons! It is a nice way to beautify the websites icons without having to do it from Photoshop as an image which may cause responsive issues.
They are usually used by calling the class name which links to the CSS that call the icons from the font family. Html lang would not have any issues with it.
Many websites use "icon fonts". But yes, assigning language letters to them would be wrong. It would be best to assign an arrow icon to the Unicode character code for a similar arrow. Another option would be to use the Private Use Area of Unicode. In this case, if your font fails to load for any reason, you won't have a good fallback strategy. But if you choose meaningful char codes for your icons, you would.
Many people are in favor of using SVGs over icon fonts. But there are pros and cons to both icon fonts and SVGs. I think that it's great that as web developers, we get to choose among different implementations or solutions to the same problem.
To answer your question, I would say that if done right, there is nothing wrong with using fonts for implementing icons.
As Mike 'Pomax' Kamermans put it:
"Fonts are for encoding vector graphics that are to be used in
typesetting context. That can mean letters, or icons, or emoji"
One big reason is accessibility. There are many browser extensions which swap out a website's font for one that's more legible for people with different visual impairments. If you use fonts for your icons, these will be swapped out too, leaving your user looking at whatever string you placed in for your icons.
I am developing a website that support both English and Arabic. The problem is that when I use a specific font size, English looks bigger that Arabic. I know how I can work this out using CSS but if there are fonts that overcome this by default that would save time and make future updates easy.
Make sure you're using multi-lingual fonts such as "Arial".
For your question I looked at Google Translate since they have same font size for all languages.
They are using there the following line as "font-family"
"arial,sans-serif!important".
Take notice that letters' width and height may vary between languages and may cause the feeling of "smaller letters".
hope that helps :)
glhf
You could try the "Coranica" font provided by this Arabic research project, which was developed especially for the case you described:
http://www.corpuscoranicum.de/fonts/coranica_allerseelen2012_09.ttf