For an international project I need to display korean letters/signs inside Flash.
Because most of the fonts that include the "asian unicode range" are too big to embed completely into the swf, I'm sticking with Malgun Gothic as a font. It's pre-installed on Windows (7 at least) so no need to load anything.
With my german Windows7 installation I can just say
new TextFormat('Malgun Gothic');
and it's displayed correctly but in Korea the font(-name) isn't recognized.
Anyone ever tried this?
I'd suggest loading a different font library for the different languages. This way you can save non-Korean users from the massive download. I have done something similar to this for Chinese using the technique outlined on my blog here
Related
I am working on a website that is mainly in Chinese language but has Japanese phrases and sentences scattered all around. It is important for me to maintain an overall unified style in fonts, while at the same time be very careful about the way Japanese characters are displayed. That is, I am not allowed to simply substitute these Japanese characters with their close counterparts in Chinese. To this end, I am currently using different custom fonts for Chinese and Japanese separately. These are visually similar OTF fonts specifically designed for Chinese or Japanese only. I load them through the CSS #font-face command. However, these .otf font files are several MB's large and take seconds, even up to minutes to load. Moreover, this happens for every new web page the viewer opens. I am wondering if there is a faster way of loading these fonts. Your help is much appreciated!
(Warning: I am a beginner.)
P.S. My website caters to mainland Chinese viewers so google fonts might not be a good solution here.
You could use WebFontLoader for improving performances of #font-face. It's developed by Google and Typekit. You can use it with their services and also for self hosted fonts.
Include fonts in css using #font-face, as you already did.
#font-face {
font-family: 'My Font';
src: ...;
}
#font-face {
font-family: 'My Other Font';
src: ...;
}
Add this code to the bottom of your main page, just before </body>
<script>
WebFont.load({
custom: {
families: ['My Font', 'My Other Font']
}
});
</script>
I ended up using the "dynamic subsetting" functionality provided by Adobe Typekit. It dynamically generates font files that only include characters used on the webpage, and sends it via its content delivery network. All I needed to do was to make an account, select fonts form their website, and include some codes for external javascript files in my HTML. One downside of this method is that I can no longer use my own fonts, and the range of Chinese/Japanese fonts provided by Adobe Typekit seems limited. Luckily I was able to find the fonts that suit my need. Also I still experience a certain degree of FOUT but I suppose it's not a big deal for me at present. Still hoping for an open-source solution in the future, though.
I am currently working on a responsive page which uses unicode symbols on certain elements and I would like them to have the same "look". As I understand, each browser and each operating system have different fonts for unicode symbols, and I noticed that the font-family property was not helping.
My biggest problem right now is that all the unicode symbols that I use show up as colored emojis on smartphones, which often ruins the page's design. Is there any way to fix that? Am I missing something?
The answer to your question can be split into two:
How to not worry about client-side fonts: web fonts
How to use emoji/pictograms without browser changing the rendering: css icon font
The latter part is more relevant as you are specifically dealing with emoji.
Web fonts
Web fonts would solve the cross-system compatibility issue. These are fonts that are served to the browser. Google fonts is a good place to start —it is actually weird to see how much of the web uses them.
If your unicode is more than just Greek or CJK and uses, say, runes, you will need to make your own web font (which is easy, Googling gives many web servers and guides), which takes advantage of #font-face rule (wiki). One serious drawback to the latter is that there is a copyright problem if you use a font you found on some depository or on your machine, so that is something worth looking out for.
Icon font library
An icon font library is a stylesheet library (with a font) that inserts an icon after an empty element with a class named for that icon, e.g. in FontAwesome <i class="fa fa-hand-spock-o"></i>.
As emoji are a recent addition and the support is more than patchy, websites and browsers add the support themselves, often coloring them (e.g. Chromoji extension). Consequently, I strongly suggest using an icon font library.
I am partial to FontAwesome —e.g. an academic tool of mine—, but there are loads of other options, some are:
Bootstrap's Glyphicons
Typicons
Fontello allows a mishmash of various icon font libraries (a longer list can be found there).
If however, the icon you are looking for is absent, you can create an icon font library using one of the many web resources (eg iconmoon.io). For the images themselves, flaticon has large collection of icons that can be converted to a icon library, which saves you time from having to slave away in illustrator.
I need to include Gurmukhi.ttf font which was provided to me. I tried to find answer to my question but found something like this #font-face : converting and displaying a font (CityBlueprint) but no solution.
At first I tred to generate the font on this site
http://www.fontsquirrel.com/tools/webfont-generator
but got the following error "The file gurmukhi.ttf is blacklisted by the Generator. Webfonts from other distributors cannot be regenerated."
Then I used
http://www.font2web.com/
It generated the required data package and I included fonts, how it was shown in demo.html. But nothing happened. By default the browser uses its own fonts, and Gurmukhi are ignored. Interesting thing is that font in demo.html is also ignored by browsers.
Then I was provided another font type Optima.ttc. I have converted it to ttf format.
http://www.fontsquirrel.com/tools/webfont-generator
"Linotype has requested that their font Optima Regular be blacklisted by the Generator. You will not be able to convert this font."
http://www.font2web.com/
Here I only got 2 files and in info.html there was the following:
Sorry, the vendor of Optima nova Regular doesn't allow us to convert this font
But click here to use the Optima nova Regular web font for free
Tip: Click on the purple Sign Up for Free! button and then click on the FREE PLAN link
As I understand both of these files are not free?
This are commercial fonts and you need to purchase atleast the web license in order to use them legally (altough you could always make the .ttf conversion yourself locally without using web generators and avoid the blacklisted check, but this is still not a legal solution and the font is still subject to copyrights).
If you don't have the budget to spend on font license, you could always use a free alternative to Optima Nova - there are similar typefaces available for free - try to search for free alternatives that could suit your design (mind that the alternative font may not be of the same quality and may not support as many glyphs).
is there any chance to make the font in Netbeans 7.3 under ubuntu 12 to look better???
take a look on how the same code looks in eclipse and netbeans
while both IDEs configured with the same editor fonts settings (monospaced), i tried with other fonts also. it seams like netbeans rendering the fonts completely in a different way, the font is much more thinner ? why is it happening ?
i read a lot about that issue and already added the following to the netbeans.conf file
-J-Dapple.awt.graphics.UseQuartz=false
-J-Dswing.aatext=true
-J-Dawt.useSystemAAFontSettings=lcd
it fixed a little, but still it is a big difference between the both,
did anyone found a proper solution for that problem or maybe one can state here that there is no solution at all ??? i am a new Netbeans user and love this IDE but this thing is driving me crazy ;((
will thank a lot !
The fonts will look different regardless of the changes you make, as Eclipse is based upon SWT, and NetBeans on Swing; the two UI tool kits use different font rendering engines.
Some fonts look better than others in Swing. My preference in Swing (and nearly everywhere I use mono-spaced fonts, really) is Ubuntu Mono, but both Deja Vu Sans Mono and Source Code Pro render well in Swing, as well.
You almost certainly have the first two on your system already, and the third is easy enough to install, should you wish. I will say that the line pitch of Source Code Pro is way to large for my taste, though it is otherwise a nice font.
After enabling the JRE flags you mention, and choosing an appropriate font, the next vital item is to choose the best font size. A given font in a given rendering engine may look better or worse at a given size than in a different environment.
I find that, in Swing, Deja Vu Sans Mono looks better in even point sizes, so I typically use it at either 10pt or 12pt in NetBeans. Ubuntu Mono, on the other hand, renders much nicer at odd sizes, so I typically use it at either 11pt or 13pt in NetBeans.
Font rendering is different because they use different UI libraries.
Netbeans uses swing.
Eclipse uses swt.
You can patch the jdk to get swing to respect your font rendering settings:
https://gist.github.com/aleksandara/2963640
PPA for ubuntu with patch applied:
https://launchpad.net/~no1wantdthisname/+archive/openjdk-fontfix
I'm sorry if this isn't the right place to be posting a question like this, but I'm at wit's end trying to figure out an answer. I don't know if it's an encoding issue or what, but on SO many web pages, Chrome won't display some characters properly. Namely things like en and em dashes, elipses, etc.
Here's an example.
That O with the umlaut is supposed to be an ellipses. I don't see the problem on Firefox, and I don't see the problem on another computer with Chrome. Encoding is set to Auto-Detect and UTF-8. If I copy and paste the O with the umlaut, it pastes as an ellipses.
Any idea why this is happening and how I can fix it?
If it pastes back as the expected character, then it is not an encoding problem - it rather would be a font problem: you likely have a font installed in your system that is being used by Chrome to display S.O. (and possibly other pages' text). If this font is broken (like, it has an incorrect encoding declaration itself), this could happen.
The workaround is finding out which is the offensive font and uninstall it from your system.
I had the problem with Chrome on Mac OSX.7.5 using Universal Type Client.
In Chrome go to pop-out side menu (3 horizontal bars) > Tools > Encoding and set the page to Auto-detect, UTF-8 (you should switch auto-detect off if it's slowing the browser down).
In Universal Type Client, there was 2 versions of Arial in conflict with each other.
Select the universal copy of Arial and deactivate it.
All pages now render correctly in Chrome.
I have a similar problem. But the thing is, the writing on the websites displays fine. It is just the writing in the Google Chrome tab that doesn't show. It comes up with squares. To fix this, I had to change the encoding to Auto-Detect and UTF-8 (I have to deselect it and then select it again). Then restart my computer in order for the writing in the tabs to display.
However, I find that the next time I turn on my computer, I have to go through the same process and it's quite irritating. Has anyone else had this problem and if so, how do we work about this?
Cheers,
C
This has been driving me bananas too. The resolution for me was similar to pho3nix's answer; but rather than creating local stylesheet overrides I removed Helvetica Neue Regular from my system. Call me a snob but better than mapping it to Aerial :-)
There was no need to remove Helvetica Neue Condensed, Light or other variants. Somehow Chrome chooses Helvetica Neue Regular to render Helvetica Regular if you have it installed.
There seems to be a problem with the way (at least some) Helvetica Neue font files have been mapped that makes them unsuitable for displaying in a browser but OK in Photoshop or Illustratior.