установка семейства шрифтов CSS для безопасного рукописного шрифта - PullRequest
Новая
       5

установка семейства шрифтов CSS для безопасного рукописного шрифта

16 голосов
/ 01 мая 2010

В CSS я обычно хожу с обычным 

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

Для небольшого изменения я выберу шрифт, похожий на почерк. Могут ли некоторые опытные ребята из CSS предложить здесь, какие бы самые безопасные шрифты (наиболее широко доступные в большинстве браузеров) выглядели как рукописные

Ответы [ 8 ]

22 голосов
/ 01 мая 2010

По аналогии с sans-serif существует общее cursive, что это «шрифт, похожий на почерк». Это зависит от браузера (как и sans-serif), но может быть хорошим началом.

Вот обзор script семейных шрифтов, установленных на пользователя:

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

Все они выглядят значительно отличающимися друг от друга, поэтому вы потеряете некоторую последовательность, но некоторые довольно широко используются.

Их основные установленные шрифты ( ТОЛЬКО ДЛЯ 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%
4 голосов
/ 02 июля 2011

Вы можете использовать один из безопасных веб-шрифтов Google: 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 голосов
/ 01 мая 2010

Нет рукописного шрифта, который был бы надежно доступен в большинстве браузеров на всех платформах. Есть подмножества, такие как шрифты, которые поставляются с Windows Vista или 7, но если вы хотите добиться какого-либо серьезного надежного покрытия, вероятно, вам придется прибегнуть к доставке шрифта вместе с веб-страницей, что, к сожалению, усложняет ситуацию.

Смежные вопросы SO:

1 голос
/ 01 мая 2010
1 голос
/ 01 мая 2010

Comic Sans будет самым рукописным шрифтом, обычным для macs и pcs, при этом вы всегда можете вставить шрифт на свою страницу.

1 голос
/ 01 мая 2010

Я полагаю, что рукописный шрифт 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, или некоторая комбинация этих решений для охвата всех пользователей.

1 голос
/ 01 мая 2010

Единственный веб-безопасный рукописный шрифт - Comic Sans - если вы хотите нанести его своим пользователям. ;)

В процентах см. Результаты опроса Code Style по состоянию на этот месяц: 

Windows  99.13%
Mac      89.94%
Linux    60.95%

Наиболее распространенным курсом на Linux является URW Chancery L, но он не кроссплатформенный.

0 голосов
/ 01 мая 2010

Есть альтернатива. Если вы знакомы с 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!

...