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

发布于 2024-08-30 18:44:02 字数 189 浏览 17 评论 0原文

在 CSS 中，我通常会使用通常的字体。

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

稍微改变一下，我会选择看起来像手写的字体。这里的一些 CSS 专家能否建议一些看起来像手写的最安全的字体（在大多数浏览器中最广泛使用）？

原文

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

烦人精 2024-09-06 18:44:02

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

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

草书字体采样器和调查结果

它们看上去彼此显着不同，因此您会失去一些一致性，但有些已被广泛采用。

他们主要安装的字体是（仅适用于 WINDOWS）：

Comic Sans MS       99.13%  
Monotype Corsiva    82.29%  
Bradley Hand ITC    63.02% 
Tempus Sans ITC     62.68% 
French Script MT    62.39%

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%

回复收藏 0 原文

伴我老 2024-09-06 18:44:02

您可以使用一种 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; 
}

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; 
}

回复收藏 0 原文

染墨丶若流云 2024-09-06 18:44:02

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

相关SO问题：

回复收藏 0 原文

呆橘 2024-09-06 18:44:02

我认为 Comic Sans 或 Lucida 手写字体将是最广泛使用的“手写”字体之一，尽管它们不是很好的字体。通过研究一些字体嵌入选项可能会更好，或者使用 fancy-smancy html 5 的东西： http://www.broken-links.com/2009/05/28/exciting-times-html-5-web-fonts/ 不会完全支持，或者使用基于闪存的 sIFR：http://www.mikeindustries .com/blog/sifr，或这些解决方案的某种组合，以覆盖所有用户。

回复收藏 0 原文

岁月静好 2024-09-06 18:44:02

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

回复收藏 0 原文

萌︼了一个春 2024-09-06 18:44:02

唯一的网络安全手写字体是 Comic Sans - 如果您想对用户造成这种情况。 ;)

有关百分比，请参阅代码风格调查截至本月：

Windows  99.13%
Mac      89.94%
Linux    60.95%

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

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.

回复收藏 0 原文

寒尘 2024-09-06 18:44:02

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

对于非 js 方式： http://css-tricks.com/ css-图像-替换/

回复收藏 0 原文

淡淡の花香 2024-09-06 18:44:02

还有一个替代方案。
如果您熟悉 JavaScript 或 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 文件！

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!

回复收藏 0 原文

~没有更多了~