Setting CSS font-family to a safe handwriting font
In CSS, I usually go with the usual
font-family: Arial, Helvetica, sans-serif;
For a little change, I'm going for 开发者_开发百科a font that looks like handwriting. Can some of the expert CSS folks here suggest what would be some of the safest fonts (most widely available in most browsers) that look like handwriting?
Similar to sans-serif
there is a generic cursive
that it a "font that resembles handwriting". This will vary by browser (as will sans-serif
) but could be a good place to start.
Here is a survey of script
family fonts installed per user (year 2012):
Cursive font sampler and survey results
They all look significantly different from each other so you'd lose some consistency, but some are quite widely adopted.
Their main installed fonts are (FOR WINDOWS ONLY):
Comic Sans MS 99.13%
Monotype Corsiva 82.29%
Bradley Hand ITC 63.02%
Tempus Sans ITC 62.68%
French Script MT 62.39%
You could use one of the Google web safe fonts: http://www.google.com/webfonts/family?family=Schoolbell&subset=latin#code
<link href="https://fonts.googleapis.com/css?family=Schoolbell&v1" rel="stylesheet">
h1 {
font-family: 'Schoolbell', arial, serif;
}
There is no handwriting font that would be reliably available in most browsers across all platforms. There are subsets like the fonts that come with Windows Vista or 7 but if you want to achieve any serious reliable coverage, it's likely that you'll have to resort to delivering the font alongside the web page - which, sadly, makes things complicated.
Related SO questions:
How to add some non standard font to website?
How to use our custom font on our website
Fonts on the Web
I suppose Comic Sans or Lucida handwriting would be some of the most widely available 'handwriting' fonts, although they're not great fonts. You might be better served by looking into some of the font embeding options, either using fancy-smancy html 5 stuff: http://www.broken-links.com/2009/05/28/exciting-times-html-5-web-fonts/ which won't be entirely supported, or using sIFR which is flash based: http://www.mikeindustries.com/blog/sifr, or some combination of these solutions to reach all users.
Comic Sans would be the most handwritingesque font common to macs and pcs, that being said you could always embed a font in your page.
Read This: http://www.w3.org/Style/Examples/007/fonts
and for a non js way: http://css-tricks.com/css-image-replacement/
The only web-safe handwriting font is Comic Sans - if you want to inflict that on your users. ;)
For percentages, see the results of the Code Style survey as of this month:
Windows 99.13%
Mac 89.94%
Linux 60.95%
The most common cursive one on Linux is URW Chancery L, but it's not cross-platform.
There's an alternative. If you're familiar with Javscript or Jquery. There's a very nice script called "Cufon" that does a thing called "Font Replacement". With this simple to use script, you can use ANY font you want on your website. I suggest you start by checking it's documentation, then create the cufon-js version of the font and then use it !
With code like this, you would be already doing font replacement ...check this simplicity
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="cufon-yui.js" type="text/javascript"></script>
<script src="Vegur_300.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1');
</script>
</head>
<body>
<h1>This text will be shown in Vegur.</h1>
</body>
</html>
Please visit this website for more information: http://cufon.shoqolate.com/generate/ (this is were you can generate your favorite font and make it ready to be used as a replacement on your site). Remember to include the jquery file!
精彩评论