I have been making my own webfont taking as a starting point articles from web designer depot and intridea.
I know different engines render fonts differently and but the issue I'm having is that firefox renders the font higher than chrome - at the size I am displaying the font this is very noticeable (3 or 4 px - which on a button means they're totally misaligned).
I have also referenced Github's octicon documentation - when checking out how octicons compare browser they look great! No noticeable difference as far as I can see. How did they achieve this?
I am using inkscape and have tried a couple of different svg starter templates. Setup is Set width: 1024 and have tried the icons at various sizes with no different outcome. i.e. 512pt square and aligned just under the baseline.
My question is what rules do I need to impliment when creating a webfont to get the smallest difference between browser rendering of the font?
This is a complicated question that involves something called vertical metrics. A font has three sets of these. the first set, found in the 'hhea' table, are generally specific to Mac. The other two sets, found in the 'OS/2' table relate to Windows (and Linux). The idea is to get these values equalized. Our Generator has a feature called oddly enough 'Fix Vertical Metrics' which does a best guess at these. Note that Github used the Generator for finishing their icons.
I know this doesn't relate specifically to SVG fonts, but I'm pretty sure this is where your problems lie. Having different vertical metrics values screws up the baselines across platforms.
Some reading:
http://blog.typekit.com/2010/07/14/font-metrics-and-vertical-space-in-css/
http://webfonts.info//webfonts-know-how/part-1-we-need-talk-about-line-height
http://code.google.com/p/googlefontdirectory/wiki/VerticalMetricsRecommendations
There's a webapp, icomoon : http://icomoon.io/app/
It make the job pretty well but you have to test the rendering of the different icons.
They offert a lot of icons if you don't want do design everything.
I had the same problem, and solved it by manually setting the metrics for all three types.
You can see my working solution with screenshots of the settings here: https://stackoverflow.com/a/20609766/955413
I used the Icomoon App to create the Emoji icon font as well as for creating custom icon fonts on a per project basis.
The Icomoon App allows you to do each of the following :
Get one or more icons from several popular icon fonts
Upload other fonts, which may be icon fonts but also regular fonts
Upload SVG files to use as icons
Combine any number of icons from any number of available fonts
Set the UNICODE hex value for whichever characters you need
Export and/or save the font set you create
For more details, see Create webfont with Unicode Supplementary Multilingual Plane symbols.
Related
I've had long standing issues with images being different shades on different browsers - for example on OSX I can make a purple or green box and it will look different on chrome than safari. I have tried exporting as png8, png32, gif, jpg, on and on and nothing changes. I'd love to find some real color safe chart or hex generator or some info as to how I can get around this issue. I've tried using web safe color palettes with same issue. It's really frustrating having a logo look great on one browser and off on another. Also matching CSS to an img will work on one but not the other.
More tests:
The answer about color management led me to a lot to read but doesn't seem to be the issue - both safari 6 and current chrome have color management yet they render images different hues. I made a test of about 10 images exports (gif exact, jpeg, png24, png8, gif adaptive, etc) and did the same in both fireworks and photoshop cs6. The result - both app export different colors (something I suspected as PS exports in sRGB I think and I am not sure about FW as it has no settings) - however most images, regardless of app export. render differently in the browsers. What is of concern is that while chrome's images pretty much matched the css color, none of safari's images (21 of them total!) came even close to the css hex that I used in both a web css test and to define the color in the apps.
I have uploaded the screenshot - the top is safari and bottom chrome - the top left corner is the css only and all the rest are the various exports from both photoshop and fireworks using most export options.
http://www.pictureshoster.com/files/6wp6irm154cre3faop2.png
Maybe this has to do with color management. Some browsers like Firefox or Safari support color management.
You could try to temporarily disable color management in Firefox by going to about:config and setting gfx.color_management.mode to 0.
You can find more information about firefox color management here:
http://www.metalvortex.com/blog/2012/03/16/831.html
I noticed that math.SE uses mathjax and has equations in a blue color.
Notice how the infinity sign is colored aswell.
However one would expect this to remain black because - as mentioned here: How to change equations color in MathJax - those symbols are in fact images who's color is not effected. Like so:
So, how do they change the color of those images as well? I thought it was impossible.
MathJax should use image mode only in a few rare cases these days. The main one is when you use Firefox to view local files (via a file:// url) and MathJax is not in the same directory as the HTML file being viewed. In this case, Firefox's same-origin policy considers MathJax to be in a separate domain, and so fails to be able to access the web-based fonts since it considers that to be cross-domain access. So MathJax uses image fonts as a fallback because it can't use web-based fonts. I'm guessing that is what is happening for you.
Math.SE doesn't have that problem since it is not a file:// url and Firefox doesn't have trouble recognizing what domain is what, so you get actual web-based fonts and not images and they can be colored properly (unlike the images). Math.SE doesn't have to do anything special to make that happen, and you are not seeing colored images, but actual fonts. That is the difference from your uncolored examples.
The solution for the Firefox local-file problem is to install the STIX fonts, or MathJax's own OTF fonts, in your system's fonts folder. You can find the MathJax fonts in the MathaJax/fonts/HTML-CSS/TeX/otf directory of the MathJax distribution that you have installed locally. If these are available as actual fonts on your system, MathJax won't have to use web-based versions, and so it can avoid the Firefox issue with the same-origin policy. This will also speed up any page using MathJax anywhere (like Math.SE) since it won't have to download the fonts over the web.
I'd like to try some decorative fonts for a web site, like this one (just as an example):
http://www.dafont.com/nymphette.font
As usual, for the web one must verify the format compatibility of the font and licensing - no problem with that. The question is relative to the proper integration in a page without side effects. As you can see in the character table, decorations are mapped to regular characters - e.g 'A'. Let's suppose I want to use the decoration mapped to A; if the web page is consumed on a browser which doesn't support external fonts, of when the font is not downloaded yet, the decoration would be rendered as 'A', and it's confusing; a browser with accessibility support would probably speak the letter out loud, etc...
How to avoid that?
Thanks.
PS Of course it appear simpler to use plain image decorations. My question is not related to solving a problem, rather to experiment with this approach and understand how workable is.
** Update: I clarify that I know how to embed fonts in CSS, and I'm already using some "regular" (alphabetic) fonts from Google. The difference between alphabetic fonts and decorative fonts is that clearly you encode readable text with the former ones; you can minimize inconveniences during the loading by specifying fallback such as "serif", etc... With decorative fonts, you're using characters to represent graphics, hence my doubts.
You can embed fonts in your CSS.
You might also want to look into the Google Font API if you want some Google fonts with no learning curve.
I am building a website with a TON of png-24 files that have transparent background. In IE 6 they obviously aren't displayed correctly, so I need some sort of reliable, good solution that will fix the PNG problem in IE and require little work and be reliable. Any good ideas?
For IE6 transparency I follow a personal flow:
1. If there is just one or two PNG images (like a logo, or a normal image) I just use filter:
#selector {background:none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.png', sizingMethod='crop');}
Problems: If applied to a link, it will no longer be clickable. Possibly apply to the h1#logo and have the a be transparent.
2. If I have a lot of 24-bit PNG files, or special use cases (repeating background, etc), I use DD_belatedPNG
IMPORTANT FOR IE7 + IE8: You cannot animate or combine the filter:alpha (which is used for overall opacity on an element in IE and also used by jQuery to set opacity) property with 24-bit transparent PNG images. It changes it to look like 8-bit transparency, with everything that is not 100% opaque or transparent taking on a black background.
Here are a few good png fixes for ie6:
http://labs.unitinteractive.com/unitpngfix.php
http://www.twinhelix.com/css/iepngfix/
There are a lot IE PNG fixes on the net, which basically all work with the same technique. The older Internet Explorers do not support alpha in PNGs directly, but they all have a filter that does so. So writing the following code as part of a css of an object puts the image in the src to the background of the element:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png');
That way, you can easily display transparency in the Internet Explorer. However it's a lot easier to just get one of the png fix scripts (in JavaScript) and include it to your page inside of conditional comments. Then the script will make all your images working automatically.
We used Dean Edwards' IE7 for this. (So named before IE7 came out.) It's been good for that kind of thing.
There are currently many options to get this working. The standard is apply a DirectX filter through CSS to change make the PNG transparent in IE6. There are even scripts that will automatically do this when the webpage loads from an IE6 or less client.
http://www.google.com/search?btnG=1&pws=0&q=transparent+png+ie6
Our (beloved) designer keeps creating PNG files with transparent backgrounds for use in our applications. I'd like to make sure that this feature of the PNG works in "older" browsers as well. What's the best solution?
edits below
#mabwi & #syd - Whether or not I agree about the use of a PNG is not the point. This is a problem that I need to solve!
#Tim Sullivan - IE7.js looks pretty cool, but I don't think I want to introduce all of the other changes an application. I'd like a solution that fixes the PNG issue exclusively. Thanks for the link.
IE PNG Fix 2.0 which supports background-position and -repeat!
Also paletted 8-bit PNG with full alpha transparency exist, contrary to what Photoshop and GIMP may make you believe, and they degrade better in IE6 – it just cuts down transparency to 1-bit. Use pngquant to generate such files from 24-bit PNGs.
I've found what looks to be a very good solution here: Unit Interactive -> Labs -> Unit PNG Fix
update Unit PNG is also featured on a list of PNG fix options on NETTUTS
Here are the highlights from their website:
Very compact javascript: Under 1kb!
Fixes some interactivity problems caused by IE’s filter
attribute.
Works on img objects and background-image attributes.
Runs automatically. You don’t have to define classes or call
functions.
Allows for auto width and auto height elements.
Super simple to deploy.
IE7.js will provide support for PNGs (including transparency) in IE6.
I've messed with trying to make a site with .pngs and it just isn't worth it. The site becomes slow, and you use hacks that don't work 100%. Here's a good article on some options, but my advice is to find a way to make gifs work until you don't have to support IE6. Or just give IE6 a degraded experience.
Using PNGs in IE6 is hardly any more difficult than any other browser. You can support all of it in your CSS without Javascript. I've seen this hack shown before...
div.theImage {
background : url(smile.png) top left no-repeat;
height : 100px;
width : 100px;
}
* html div.theImage {
background : none;
progid:DXImageTransform.Microsoft.AlphaImageLoader(src="layout/smile.png", sizingMethod="scale");
}
I'm not so sure this is valid CSS, but depending on the site, it may not matter so much.
(it's worth noting that the URL for the first image is based on the directory of the stylesheet, where the second is based on the directory of the page being viewed - thus why they do not match)
#Hboss
that's all fine and dandy if you know exactly all the files (and the dimensions of each) that you're going to be displaying - it'd be a royal pain to maintain that CSS file, but I suppose it'd be possible. When you want to start using transparent PNGs for some very common purposes: a) incidental graphics such as icons (perhaps of differing size) which work on any background, and b) repeating backgrounds; then you're screwed. Every workaround I've tried has hit a stumbling block at some point (can't select text when the background is transparent, sometimes the images are displayed at wacky sizes, etc etc), and I've found that for maximum reliability I'll have to revert to gifs.
My advice is to give the PNG transparency hack a shot, but at the same time realise that it's definitely not perfect - and just remember, you're bending over backwards for users of a browser which is over 7 years old. What I do these days is give IE6 users a popup on their first visit to the site, with a friendly reminder that their browser is outdated and doesn't offer the features required by modern websites, and, though we'll try our best to give you the best, you'll get a better experience from our site and the internet as a whole if you BLOODY WELL UPGRADED.
I believe all browsers support PNG-8. Its not alpha blended, but it does have transparent backgrounds.
I might be mistaken, but I'm pretty sure IE6 and less just don't do transparency with PNG files.
You sort of are, and you sort of aren't.
IE6 has no support natively for them.
However, IE has support for crazy custom javascript/css and COM objects (which is how they originally implemented XmlHttpRequest)
All of these hacks basically do this:
Find all the png images
Use a directx image filter to load them and produce a transparent image in some kind of format IE understands
Replace the images with the filtered copy.
One thing to think about is Email clients. You often want PNG-24 transparency but in Outlook 2003 with a machine using IE6. Email clients won't allow CSS or JS tricks.
Here is a good way to handle that.
http://commadot.com/png-8-that-acts-like-png-24-without-fireworks/
If you export your images as PNG-8 from Fireworks then they'll act the same as gif images. So they won't look shitty and grey, transparency will be transparency but they won't have the full 24 bit loveliness that other browsers do.
Might not totally solve your problem but at least you can get part way there just be re-exporting them.
I might be mistaken, but I'm pretty sure IE6 and less just don't do transparency with PNG files.
I have two "solutions" that I use. Either create GIF files with transparency and use those everywhere, or just use them for IE 6 and older with conditional style sheets. The second really only works if you are using them as backgrounds, etc.