将 CSS font-family 设置为安全的手写字体答案

【问题标题】：Setting CSS font-family to a safe handwriting font将 CSS font-family 设置为安全的手写字体
【发布时间】：2011-02-14 09:51:52
【问题描述】：

在 CSS 中，我通常使用通常的方式

font-family: Arial, Helvetica, sans-serif;

为了一点点改变，我想要一个看起来像手写的字体。这里的一些 CSS 专家能否建议一些看起来像手写的最安全的字体（在大多数浏览器中最广泛使用）？

【问题讨论】：

标签： css font-family

【解决方案1】：

类似于sans-serif，有一个通用的cursive，它是“类似于手写的字体”。这会因浏览器而异（sans-serif 也会有所不同），但可能是一个不错的起点。

这是对每位用户安装的script 系列字体的调查（2012 年）：

Cursive font sampler and survey results

它们看起来都大不相同，所以你会失去一些一致性，但有些被广泛采用。

他们安装的主要字体是（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%

【讨论】：

最终可能会是 Comic Sans，或草书但不是真正的手写风格字体。
死链接。通过回程机：web.archive.org/web/2013*/codestyle.org/css/font-family/sampler-Cursive.shtml

【解决方案2】：

没有一种手写字体可以在所有平台的大多数浏览器中可靠地使用。有一些子集，如 Windows Vista 或 7 附带的字体，但如果您想获得任何可靠的覆盖，您可能不得不求助于在网页旁边提供字体 - 遗憾的是，这使事情变得复杂。

相关的 SO 问题：

【讨论】：

不是真的，Comic Sans 虽然一个可疑的选择是可靠的。
@fig 我个人不会认为 Comic Sans 是一种真正的手写字体，尽管它有点...... OP 将不得不决定它是否足够手写。
很公平，但大多数人会认为它是一种，即使不是，它也是最接近大多数浏览器中安装的一种。

【解决方案3】：

唯一的网络安全手写字体是 Comic Sans - 如果您想将其强加给您的用户。 ;)

有关百分比，请参阅截至本月的 Code Style survey 的结果：

Windows  99.13%
Mac      89.94%
Linux    60.95%

Linux 上最常见的草书是 URW Chancery L，但它不是跨平台的。

【讨论】：

【解决方案4】：

我想 Comic Sans 或 Lucida 手写字体将是一些最广泛使用的“手写”字体，尽管它们不是很好的字体。通过查看一些字体嵌入选项，您可能会得到更好的服务，或者使用花哨的 html 5 东西：http://www.broken-links.com/2009/05/28/exciting-times-html-5-web-fonts/，它不会被完全支持，或者使用基于 flash 的 sIFR：http://www.mikeindustries.com/blog/sifr，或某种组合覆盖所有用户。

【讨论】：

【解决方案5】：

Comic Sans 将是 Mac 和 pc 中最常见的手写字体，也就是说您始终可以在页面中嵌入字体。

【讨论】：

【解决方案6】：

阅读：http://www.w3.org/Style/Examples/007/fonts

对于非 js 方式：http://css-tricks.com/css-image-replacement/

【讨论】：

【解决方案7】：

还有一个选择。如果您熟悉 Javscript 或 Jquery。有一个很好的脚本叫做“Cufon”，它做了一个叫做“字体替换”的事情。使用这个简单易用的脚本，您可以在您的网站上使用任何您想要的字体。我建议您首先检查它的文档，然后创建字体的 cufon-js 版本，然后使用它！

使用这样的代码，您已经在进行字体替换了...检查一下这种简单性

<!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>

请访问此网站了解更多信息： http://cufon.shoqolate.com/generate/（这是您可以生成自己喜欢的字体并准备好在您的网站上用作替代品）。记得包含 jquery 文件！

【讨论】：

【解决方案8】：

您可以使用其中一种 Google 网络安全字体：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; 
}

【讨论】：

这是在页面中包含字体，而不是使用网络安全字体。重要区别。
这优雅地解决了 OP 的问题，提供了一个比担心客户端环境更健壮的解决方案。