как добавить какой-нибудь нестандартный шрифт на сайт?

<p>есть ли способ добавить какой-нибудь пользовательский шрифт на сайт без использования изображений, <a href="http://en.wikipedia.org/wiki/adobe\_flash">flash</a> или какой-либо другой графики?</p><p>например, я работал на каком-то свадебном веб-сайте и нашел много хороших шрифтов для этой темы, но я не могу найти правильный способ добавить этот шрифт на сервер, и как мне включить этот шрифт с помощью css в html? можно ли обойтись без графики?</p>

<p>это можно сделать с помощью css:</p><pre><code><style type="text/css"> @font-face { font-family: "my custom font"; src: url(http://www.example.org/mycustomfont.ttf) format("truetype"); } p.customfont { font-family: "my custom font", verdana, tahoma; } </style> <p class="customfont">hello world!</p> </code></pre><p>это <a href="http://www.w3schools.com/cssref/css3\_pr\_font-face\_rule.asp">поддерживается для всех обычных браузеров</a> , если вы используете truetype-fonts (ttf) или web open font format (woff).</p>

<p>вы можете добавить некоторые шрифты через <a href="http://www.google.com/fonts/">google web fonts</a> .</p><p>технически шрифты размещаются в google, и вы связываете их в заголовке html. затем вы можете свободно использовать их в css с помощью <a href="http://www.w3.org/tr/css3-fonts/#font-face-rule"><code>@font-face</code></a> ( <a href="http://www.css3.info/preview/web-fonts-with-font-face/">прочитайте об этом</a> ).</p><p>например:</p><p>в разделе <code><head></code>:</p><pre><code> <link href=' http://fonts.googleapis.com/css?family=droid+sans' rel='stylesheet' type='text/css'> </code></pre><p>тогда в css:</p><pre><code>h1 { font-family: 'droid sans', arial, serif; } </code></pre><hr><p>решение кажется достаточно надежным (даже <a href="http://www.smashingmagazine.com/">smashing magazine использует его для заголовка статьи.</a> ). однако в настоящее время не так много шрифтов в <a href="http://www.google.com/fonts/">google font directory</a> .</p>

<p>для этого нужно использовать css-объявление @ font-face, которое позволяет авторам указывать онлайн-шрифты для отображения текста на своих веб-страницах. позволяя авторам предоставлять свои собственные шрифты, @ font-face устраняет необходимость зависеть от ограниченного числа шрифтов, которые пользователи установили на свои компьютеры.</p><p>посмотрите на следующую таблицу:</p><p><img src="https://i.stack.imgur.com/ffhys.png" alt="enter image description here"></p><p>как видите, есть несколько форматов, о которых вам нужно знать, в основном из-за кросс-браузерной совместимости. сценарий в мобильных устройствах не сильно отличается.</p><h2>решения:</h2><p><strong> 1 - полная совместимость с браузером </strong></p><p>это метод с самой глубокой поддержкой, возможной сейчас:</p><pre class="lang-css prettyprint-override"><code>@font-face { font-family: 'mywebfont'; src: url('webfont.eot'); /* ie9 compat modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* ie6-ie8 */ url('webfont.woff') format('woff'), /* modern browsers */ url('webfont.ttf') format('truetype'), /* safari, android, ios */ url('webfont.svg#svgfontname') format('svg'); /* legacy ios */ } </code></pre><p><strong> 2 - большая часть браузера </strong></p><p>вещи <a href="http://caniuse.com/#feat=woff">сильно смещаются в сторону woff</a> хотя, так что вы, вероятно, можете сойти с рук:</p><pre><code>@font-face { font-family: 'mywebfont'; src: url('myfont.woff') format('woff'), /* chrome 6+, firefox 3.6+, ie 9+, safari 5.1+ */ url('myfont.ttf') format('truetype'); /* chrome 4+, firefox 3.5, opera 10+, safari 3—5 */ } </code></pre><p><strong> 3 - только самые последние браузеры </strong></p><p>или даже просто вон.<br> затем вы используете это так:</p><pre><code>body { font-family: 'mywebfont', fallback, sans-serif; } </code></pre><h2>ссылки и дальнейшее чтение:</h2><p>это в основном то, что вам нужно знать о реализации этой функции. если вы хотите больше изучить эту тему, я рекомендую взглянуть на следующие ресурсы. большая часть того, что я положил здесь, извлечена из следующего</p><ul> <li> <a href="http://css-tricks.com/snippets/css/using-font-face/">используя font face</a> (очень рекомендуется)</li> <li> <a href="http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/">bulletproof @ font-face синтаксис</a> </li> <li> <a href="http://caniuse.com/fontface">могу ли я использовать веб-шрифты @ font-face?</a> </li> <li> <a href="http://blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/">как архивировать поддержку cross-browser @ font-face</a> </li> <li> <a href="http://blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/">@ font-face в сети разработчиков css mozilla</a> </li> </ul>

<p>если под нестандартным шрифтом вы подразумеваете нестандартный шрифт стандартного формата, вот как я это делаю, и он работает для всех браузеров, которые я проверял до сих пор:</p><pre><code>@font-face { font-family: tempestasevencondensed; src: url("../fonts/pf\_tempesta\_seven\_condensed.eot") /* eot file for ie */ } @font-face { font-family: tempestasevencondensed; src: url("../fonts/pf\_tempesta\_seven\_condensed.ttf") /* ttf file for css3 browsers */ } </code></pre><p>так что вам просто понадобятся шрифты ttf и eot. некоторые инструменты, доступные онлайн, могут сделать преобразование.</p><p>но если вы хотите прикрепить шрифт в нестандартном формате (растровые изображения и т.д.), я не могу вам помочь.</p>

<p>в статье <em> <a href="http://jontangerine.com/log/2008/10/font-face-in-ie-making-web-fonts-work">font-face в ie: создание веб-шрифтов</a> </em> говорится, что он работает со всеми тремя основными браузерами.</p><p>вот пример, с которым я начал работать: <a href="http://brendanjerwin.com/test\_font.html">http://brendanjerwin.com/test\_font.html</a> </p><p>дополнительную информацию можно найти в <em> <a href="http://brendanjerwin.com/development/web/2009/03/03/embedding-fonts.html">встраивание шрифтов</a> </em>.</p>

<p>или вы можете попробовать <a href="http://en.wikipedia.org/wiki/scalable\_inman\_flash\_replacement">sifr</a> . я знаю, что он использует flash, но только при наличии. если flash недоступен, он отображает исходный текст в исходном (css) шрифте.</p>

<blockquote> <p>есть ли способ добавить какой-нибудь пользовательский шрифт на сайт без использования ... flash?</p> </blockquote><p>конечно, используйте <a href="http://en.wikipedia.org/wiki/microsoft\_silverlight">silverlight</a> .</p>

<p>техника, рекомендованная w3c для этого, называется "встраиванием" и хорошо описана в следующих трех статьях: <a href="http://www.allgraphicdesign.com/downloadfonts/fontsarticles/embeddingfonts/csswebsitespages.html">встраивание шрифтов</a> . в моих ограниченных экспериментах я обнаружил, что этот процесс подвержен ошибкам и имел ограниченный успех в том, чтобы заставить его функционировать в среде с несколькими браузерами.</p>

<p>если вы используете asp.net, действительно легко генерировать шрифты на основе изображений без необходимости устанавливать (как при добавлении к установленной базе шрифтов) шрифты на сервер, используя:</p><pre><code>privatefontcollection pfont = new privatefontcollection(); pfont.addfontfile(filename); fontfamily ff = pfont.families[0]; </code></pre><p>а затем рисование с этим шрифтом на <code>graphics</code>.</p>

<p>также можно использовать шрифты woff - пример <a href="https://encrypted.pcode.nl/blog/wp-content/themes/simplest-pcode/style.css">здесь</a> </p><pre><code>@font-face { font-family: 'plakat fraktur'; src: url('/resources/fonts/plakat-fraktur-black-modified.woff') format('woff'); font-weight: bold; font-style: normal; } </code></pre>

<p>просто предоставьте ссылку на реальный шрифт, как этот, и вам будет хорошо идти</p><pre><code><!doctype html> <html> <head> <link href='https://fonts.googleapis.com/css?family=montserrat' rel='stylesheet'> <style> body { font-family: 'montserrat';font-size: 22px; } </style> </head> <body> <h1>montserrat</h1> <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </body> </html> </code></pre>

<p>похоже, он работает только в internet explorer, но быстрый поиск в google "html embed fonts" дает <a href="http://www.spoono.com/html/tutorials/tutorial.php?id=19">http://www.spoono.com/html/tutorials/tutorial.php?id=19</a> </p><p>если вы хотите оставаться независимым от платформы (и вам следует!), вам придется использовать изображения или просто использовать стандартный шрифт.</p>

<p>я провел небольшое исследование и выкопал <em> <a href="http://www.alistapart.com/articles/dynatext/">динамическая замена текста</a> </em> (опубликовано в 2004-06-15).</p><p>эта техника использует изображения, но, похоже, "свободные руки". вы пишете свой текст и позволяете нескольким автоматизированным сценариям выполнять поиск и замену на странице для вас на лету.</p><p>у него есть некоторые ограничения, но это, вероятно, один из более простых вариантов (и более совместимых с браузером), чем все остальные, которые я видел.</p>

<p>недавно monotype выпустила множество своих шрифтов вместе с новой системой их использования на ваших веб-страницах: <a href="http://www.webfonts.fonts.com/">http://www.webfonts.fonts.com/</a> </p>

<p>см. статью <em> <a href="http://www.smashingmagazine.com/2009/01/27/css-typographic-tools-and-techniques/">50 полезных инструментов дизайна для красивой веб-типографии</a> </em> для альтернативных методов.</p><p>я использовал только <a href="http://wiki.github.com/sorccu/cufon/">cufon</a> . я нашел его надежным и очень простым в использовании, поэтому я придерживался его.</p>

<p>если у вас есть файл вашего шрифта, вам нужно будет добавить больше форматов этого шрифта для других браузеров.</p><p>для этой цели я использую генератор шрифтов наподобие <a href="http://www.fontsquirrel.com/tools/webfont-generator">fontsquirrel</a> , он предоставляет все форматы шрифтов и его @ font-face css, вам нужно будет просто перетащить его в свой файл css.</p>

<p>я боюсь, что графика - ваш единственный вариант в этом случае.</p>