The challenge:
Provide dynamic web fonts that render acceptably across all major browsers, devices and Operating Systems
The story:
So I had used cufon or sifr in the past and had since abandoned both in favor of #font-face. After using #font-face in production for some time, I made a horrifying discovery. Many fonts (most?) look like crap in Windows XP, regardless of browser. Even in google chrome, XP renders the fonts unacceptably jagged and ugly.
I am aware of why this is happening. After reading many excellent posts on ye olde stack overflow, I understand the issue is NOT of font hinting, but of XP having clear-type set to off be default. So ALL fonts are jagged in XP by default regardless of application.
So... if #font-face works great everywhere BUT XP with clear-type off, and is still superior to cufon what should we be doing?
Possible solutions:
#font-face as default, Cufon with user agent sniffing for windows XP.
(currently using, and very much not loving it)
#font-face alone with yet unknown method of forcing clear-type
Cufon alone :(
Another paradigm all together
Failed solutions:
Adobe Typekit (jagged in XP on their own website!, even though they show a smooth specimen jpeg)
Google Webfonts (same problem with XP)
#font-face alone (same problem with XP)
Cufon so far works everywhere, but just sucks, and offers additional challenges if you are animating anything, or wish to update the text after the fact.
Do you have a solution that works completely cross browser and cross OS? What is the best way to handle this?
I'm pretty sure the web-fonts, which look ugly, are missing some hinting (edit: Nope, even though hinting is still required to make a font look good on windows, the real problem here was the disabled ClearType in XP. However, this answer has a solution anyway).
Unlike font renderers on other operating systems the windows engine relies on hinting information shipped with the font. If the hinting is missing, bad or broken the font will look ugly - simple as that. Luckly there's a way to add some automatically generated hinting to a ttf-font using ttfautohint. After adding the hinting you can generate the different web-font-formats (eof, woff, etc) you need from the enhanced TTF. Additionally you should try to use SVG fonts if font-smoothing is disabled, since they are always rendered with antialiasing.
I've written an article on how to create web-fonts on Pixels|Bytes, which explains how to add hinting to a font and how to use my Font Smoothie script to enable SVG fonts when necessary. Hope this helps :)
PS: I'm aware that linking to my own blog won't be appreciated here, but I think my post describes a good solution to the problem, so I posted it anyway. Please leave a comment if you want me to remove the link and I'll do so.
http://www.useragentman.com/blog/2009/11/29/how-to-detect-font-smoothing-using-javascript/
This is what I have found works so far. This solution detects jagged fonts, so then we can do something like this: #font-face as standard, and Cufon as fallback.
In my case, I found that the answer does not in fact center on enabling Clear Type in WinXP. Whether Clear Type is enabled or disabled, I find that some of my #font-face English fonts (especially BLACK, SANS-SERIF) look bad in IE7 and IE8. It's sometimes more than just being jagged or having bad anti-aliasing. The big problem I see is that the shape of the font itself (some fonts, not all) seems to squish into something quite unattractive. I found an acceptable solution by following the advice of Torben. Font Hinting was all I needed, and again, that solution has nothing to do with Clear Type being enabled. To get the font hinting app up and running, read the instructions here:
https://gist.github.com/davelab6/3783491
(I used the "ttfautohint-0.95.tar.gz" file here): http://sourceforge.net/projects/freetype/files/ttfautohint/0.95/
You should also review the documentation, and you need to also install MacPorts (or you will get an error in the Terminal during your build), but since my rep score prevents me from posting more than two URLs, you'll have to Google for that.
Better hinting doesn't mean your #font-face fonts will now look as perfectly smooth and great on IE in WinXP as they do on Macintosh browsers. But I found that the font hinting prevents nasty distortions in the shape of some fonts within IE7 and IE8. To me, that is an acceptable solution.
I can only add that it's rather troublesome to build the ttfautohintGUI on OSX. You have to installed hundreds of MB of software, downloading from multiple locations too, just to build the GUI app. But once done, the app allows you easily to hint your #Font-Face fonts and resolve many WinXP display issues. Just be sure to tick "Windows Compatibility" in the GUI (it's unticked by default). I also unticked the "Add ttfautohintinfo" and "Pre-hinting" options, leaving everything else as their defaults. Click "Browse..." to add your Input File (the font you want to hint), and then copy and paste that path in the Output File, changing the filename to whatever you want it to be. You won't enable the "Run" button unless there is something in both the Input File and Output File fields.
Best wishes.
Related
I like the Netbeans IDE and have been using it for many years. Sometimes I am forced to run it on a remote machine, which I access using ssh with X forwarding.
Whenever I do this, all the text looks TERRIBLE! The fonts are ugly, jaggy, pixelated, and sometimes hard to read. The common solution for adding -J-Dawt.useSystemAAFontSettings=lcd to the default settings in netbeans.conf makes fonts look better, but it causes a HUGE performance drop - the IDE responds so slowly that it is practically unusable.
What can I do? Must I choose between decent performance or readable text? Can't I have both?
It turns out that it is indeed possible to have good performance and good fonts at the same time. I had a really hard time finding this answer, so I put it here on stackoverflow in the hope of making other Netbeans users' lives easier.
The magic trick is the xrender option to the JVM. It changes something about how the java runtime renders text so that the performance drop I saw with font smoothing completely disappeared!
Just add -J-Dsun.java2d.xrender=true -J-Dawt.useSystemAAFontSettings=on to the settings line in netbeans.conf (Usually /usr/local/netbeans-X.Y/etc/netbeans.conf), and enjoy pretty fonts and good performance!
Source: https://docs.oracle.com/javase/7/docs/technotes/guides/2d/flags.html
Tested on RHEL remote machine running Netbeans 8.2.
PS: -J-Dawt.useSystemAAFontSettings=on turns on font AA without subpixel hinting. This is my personal preference. You might want to try gasp or lcd to see which one you like better. The link lists all the available options.
We're using typekit fonts for some of our styles. We've noticed that on some machines, the fonts don't load on our live site, although they do on our dev site. This is only on certain machines, and only when viewing our live site (which is identical code-wise to dev at this point.)
For example, my boss looks at the dev site and the live site in two separate tabs in Chrome on the Mac. The elements using typekit fonts look different on the live site (they're failing over to the default serif font.) On my Mac in Chrome, everything is correct on both versions of the site.
Is there some kind of browser setting somewhere that would cause this? (Given that the fonts being used are barely distinguishable from a default serif font, my solution would be to just eliminate the typekit fonts altogether, but it's not my call to make.)
I'm not sure if this solves your issue, but my issue was that I was loading "Museo Sans", and I needed to load "museo-sans" for the css font-family. The first font-family was loading the font directly from my machine, so it worked on another designers machine who also had the font loaded, but not on most other devices/machines via typekit file.
Hope this clears up one potential scenario.
There are a number of GUI hosts for Powershell (Powershell ISE, PoshConsole, etc) but I'm not aware of any purely console hosts other than powershell.exe. Are there any that offer any advantages over powershell.exe?
I'd like to be able to customise more of the host behaviour - specifically to add and customise key bindings other than TAB, and to customise error reporting. There could well be more...
If there aren't any "extended" versions of powershell.exe that offer this, how difficult would it be to write one? I have the SDK sample code, and it looks fairly accessible, but it's hard to be sure what features powershell.exe provides as opposed to the powershell "engine" (as there's no documentation I've found that focuses specifically on the host capabilities).
How about Console it can host multiple shells. Might be worth a look.
The best pure-console for PowerShell is obviously PowerShell Plus, which actually uses a fullblown "native" Windows console, but it wraps it up in candy coating and adds tons of IDE-style features. As far as I know this is the only third-party host that's capable of running "graphical" console apps like edit.com
As a sidenote, I'm honestly not sure it's worth the handicap of a true console just to keep compatibility with whatever graphical interactive console applications like Edit.com might still be around. Considering the limitations, and the amount of work that has to be done to pull off something like what PowerShell Plus has... Personally I can't wait for the day when I no longer have to worry about and can move on to console apps that are really MEF-style plugins in a console-style interface like PoshConsole :-)
I realise that this question is years old, but since I stumbled across it in search of answers, I thought I would add my findings.
I settled on Cmder, for the following reasons:
It wraps cmd and Powershell, so you get the same set of features you would find in either.
The default colour scheme is Monokai, which is not only pleasing to the eye, but actually readable. Maybe I was missing something, but the default output for most of my tasks (Git, Mocha tests etc.) had poor contrast most of the time and I found myself squinting at the screen.
Tab support - I've wanted this for a while, but until now I hadn't found a solution that provided tabs as well as everything else. Powershell IDE has some character encoding / text colour issues that I couldn't ignore.
It's portable - stick it on a USB stick and take it with you wherever you go.
It's configurable - the developer (Samuel Vasko) has done a great job here. It's not lacking for customisation.
Specifically answering the OP's requirements, you can remap key bindings and create macros. I don't see the ability to customise error reporting however.
Hopefully anyone else out there still searching for a decent command line emulator on Windows will see this answer and rejoice.
If you stick with a "Console" subsystem approach you will be saddled with all the limitations that come along with a Windows console subsystem application. Many complaints about PowerShell.exe limitations are really limitations of this feature of Windows (kbd shortcuts, line editing, etc).
What's wrong with PoshConsole? Even though it allows graphics to be displayed it is still a "console-style" UI on top of the PowerShell engine?
When we click the check box "Install files for complex script and right to left languages (including Thai)" in Regional and Language settings what exactly happens?
Changes to registry keys?
I noticed that it installs some .fon files and keyboard dlls.
Is this totally necessary if one just wish to read complex script on Windows XP? My test inside VirtualBox as Windows 7 as the host OS seems to indicate that for reading Complex Script need not be enabled. Yet that's not what all the literature on the subject says. What's going on?
Update:
http://hi.wikipedia.org should not be readable if Complex Script is not enabled
http://hi.wikipedia.org/wiki/विकिपीडिया:Devanagari_Help
Problem is that it is readable.
Font files. Rendering libraries ('Uniscript'). Input methods. Certainment beaucoup de cle-registry. (Certainly lots-o-registry-keys.)
Note that IE will tend to get things right even when other things don't, since it builds in a good deal of fancy-pants rendering. Try, oh, Outlook, or some simple sample Win32 program.
When I create an application on my laptop it compiles and renders just fine. If I compile the page and put it on a server to host it, it still renders just fine on multiple computers.
However, if I transfer the code to my desktop and run it on my desktop the size of all the fonts is all messed up. Everything is MUCH bigger. As you can probably guess, this messes up my layout considerably.
On the desktop machine I am using the GWT browswer...
Any ideas on why the same code would render differently on two different machines?
If I compile the code on the desktop and put it on a server it looks like the laptop version (small).
Essentially I have this:
Laptop
Hosted: small
Server: small
Desktop
Hosted: large
Server: small
I have checked this against IE, firefox and safari.
Why does hosted mode look different?
Thanks!
Because you have different default font sizes and/or monitor dpi settings on the two machines?
AIUI the GWT standard styles just sets font size to "small", which will be relative to the default font size set in the browser. Either set the fonts to a measurement in pixels or, better, use a more liquid layout that can cope with a range of font sizes.
The GWT Debug browser uses the native browser on your machine (so IE on Windows, Safari on Mac, Firefox on Linux).
It's not a GWT issue, but some fonts look different in different browsers (even at the same size and style). You need to find a font and size that looks nice across all the browsers you want to support, and then set that as a css style for your text.
It is something to do with the Browser you used, the Browser on your desktop may have large font as preference set. Try restore default settings of that browser or try with other browsers.
I'm doing a project in GWT as well and am getting hit by this as well and here's my take....
[rant]
This whole html, css, javascript ball wasnt just randomly dropped...the mtha fcka was dropped from the fckng space station. You'd think with all the self proclaimed brainiacs out there working on this stuff there'd be a solution by now. There's a million frameworks out there that help avoid putting together a big slop but the fact is that spaghetti nightname started long ago and is beyond clean up and it's called html/javascript.
There's no browser standards. Some sites support only IE, and I'll get that box that says "Sorry, you must use IE" and then the neighbors have to hear me curse cause what are you supposed to do if you don't run Windows?
[/rant]