Setting CSS font-family to a safe handwriting font_问答_开发者

Setting CSS font-family to a safe handwriting font

开发者 https://www.devze.com 2022-12-28 14:50 出处：网络

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

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!