web-dev-qa-db-ja.com

css font-familyを安全な手書きフォントに設定する

CSSでは、私は通常、いつものように行きます

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

少し変更して、手書き風のフォントを作成します。 CSSのエキスパートの一部が、ハードライティングのように見える最も安全なフォント（ほとんどのブラウザで最も広く利用されている）のいくつかを提案できますか？

cssfont-family
18
dmontain

sans-serifと同様に、「手書き文字に似たフォント」という一般的なcursiveがあります。これはブラウザによって異なりますが（sans-serifも同様）、開始するのに適しています。

これは、ユーザーごとにインストールされたscriptファミリーフォントの調査です。

http://www.codestyle.org/css/font-family/sampler-Cursive.shtml

それらはすべて互いにかなり異なって見えるため、ある程度の一貫性が失われますが、非常に広く採用されているものもあります。

インストールされている主なフォントは（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%
22
Alex Mcp

次のいずれかのGoogle Webセーフフォントを使用できます。 http://www.google.com/webfonts/family?family=Schoolbell&subset=latin#code

<link href='http://fonts.googleapis.com/css?family=Schoolbell&v1' rel='stylesheet' type='text/css'>
h1 { font-family: 'Schoolbell', arial, serif; }
4
adjwilli

すべてのプラットフォームのほとんどのブラウザーで確実に利用できる手書きフォントはありません。 Windows Vistaまたは7に付属するフォントのようなサブセットがありますが、信頼性の高いカバレッジを実現したい場合は、Webページと一緒にフォントを配信する必要がある可能性があります。

関連SO質問：

4
Pekka 웃

これを読んでください： http://www.w3.org/Style/Examples/007/fonts

js以外の方法： http://css-tricks.com/css-image-replacement/

1
Luca Filosofi

唯一のWebセーフ手書きフォントはComic Sansです-ユーザーにそれを与えたい場合。 ;）

パーセンテージについては、今月の コードスタイル調査 の結果を参照してください。

Windows  99.13%
Mac      89.94%
Linux    60.95%

Linuxで最も一般的な筆記体は、URW Chancery Lですが、クロスプラットフォームではありません。

1
user65663

Comic SansやLucidaの手書きは、最も広く利用されている「手書き」フォントの1つだと思いますが、すばらしいフォントではありません。 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 、またはいくつかこれらのソリューションを組み合わせて、すべてのユーザーにリーチします。

1
quoo

Comic SansはMacとPCに共通する最も手書きのフォントですが、ページにいつでもフォントを埋め込むことができます。

1
danspants

代替案があります。 JavscriptまたはJqueryに精通している場合。 「フォント置換」と呼ばれることを行う「Cufon」と呼ばれる非常に素晴らしいスクリプトがあります。このシンプルなスクリプトを使用すると、Webサイトで必要なすべてのフォントを使用できます。まず、ドキュメントを確認してから、フォントの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>

詳細については、このWebサイトにアクセスしてください： http://cufon.shoqolate.com/generate/ （これは、お気に入りのフォントを生成して、それはあなたのサイトの代わりとして使用する準備ができています）。 jqueryファイルを含めることを忘れないでください！

0
UXdesigner