каллиграфические шрифты на сайте

Question

Если я хочу, чтобы какой-то текст отображался шрифтом каллиграфии, как я узнаю, как он будет отображаться на компьютере пользователя. Как узнать, какие шрифты есть у этого человека на компьютере или это имеет значение? какие-нибудь хорошие примеры сделать это в CSS?

Не лучше ли мне сложить что-нибудь вместе в фотошопе и сохранить как изображение?

Answer 1

Если вы используете шрифт для заголовков и необычных элементов страницы, которые не будут часто меняться, я бы использовал изображение из фотошопа.

Если вы хотите использовать шрифт для основной части текста Iпредложил бы определить семейство шрифтов в css.Я бы нашел шрифт, который вы хотите использовать в вашей текущей ОС, если шрифт, который вы нашли, и шансы на его загрузку у конечного пользователя не будут.Если это системный шрифт или шрифт, который поставляется с основным программным приложением, таким как MS Word, есть большая вероятность, что он будет доступен на компьютере конечного пользователя.Как только вы найдете нужный шрифт, я проведу небольшое исследование и выясню, можно ли найти что-то похожее во вкусе Mac и даже в Unix.

body
{
font-family:"DejaVu Sans","DejaVu Sans Mac Name","DejaVu Sans Unix Name","Times New Roman"
}

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

Answer 2

Вы можете встраивать файлы шрифтов TTF в CSS.

Хорошим примером этого является здесь :

/* DejaVu Sans 2.24
   http://dejavu.sourceforge.net/wiki/index.php/Main_Page */
@font-face {
    font-family: "DejaVu Sans";
    src: url("data:application/octet-stream;base64,[BASE-64-ENCODED-FILE-CONTENTS]")
}

Редактировать:

Примечание. Это будет работать только в Firefox и, возможно, в Chrome.

Microsoft опубликовала документ о том, как встраивать шрифты в веб-страницу с помощью EmbeddedOpenType формат.Он включает в себя преобразование шрифта в файл EOT и последующую ссылку на него в таблице стилей с использованием следующего синтаксиса:

@font-face {
    font-family: Piefont;
    font-style:  normal;
    font-weight: normal;
    src: url(PIE0.eot);
}

(Это было взято из официальной онлайн-демонстрации здесь ).

Исходя из ответа Болдевина ниже, я бы поспорил, что вы также можете использовать файл TTF в параметре src:.

Answer 3

Чтобы добавить к @font-face сторонникам: Пол Ирландский опубликовал версию этого объявления CSS, которая работает во всех новых браузерах, а также во всех IE вплоть до IE5.5. Однако для работы этой техники вам необходим шрифт в формате TTF и EOT.

Если лицензия вашего шрифта позволяет это сделать, существует множество инструментов для преобразования между форматами. Просто Google для этого.

Answer 4

Я склонен использовать @font-face на своих личных веб-сайтах ... но это зависит от того, для чего вы это делаете.

Сначала .. вопросы.Это статический текст или мы говорим о заголовках постов и т. Д.

Если статический текст, такой как основной заголовок, идет с изображением.{background: url (/images/use-the-text-as-image-name-for-seo.png) без повтора вверху слева;ширина: 100px;высота: 30px;} / * ширина и высота соответствуют ширине / высоте изображения / h1 strong {position: absolute; left: -8000px;} / гарантирует, что текст не будет отображаться поверх изображенияне скрывает это для целей seo / screen reader * /

Если вы говорите о чем-то, что должно быть динамичным, и вам нужно нечто большее, чем просто градация, используйте sIFR.Если изящная деградация приемлема, используйте @font-face