Использование пользовательских шрифтов с использованием CSS?

Ответ 1

В общем, вы можете использовать пользовательский шрифт, используя @font-face в вашем CSS. Вот очень простой пример:

@font-face {
    font-family: 'YourFontName'; /*a name to be used later*/
    src: url('http://domain.com/fonts/font.ttf'); /*URL to font*/
}

Затем тривиально использовать шрифт для определенного элемента:

.classname {
    font-family: 'YourFontName';
}

(.classname - ваш селектор).

Обратите внимание, что некоторые шрифтовые форматы не работают во всех браузерах; вы можете использовать генератор fontsquirrel.com, чтобы избежать слишком большого количества усилий.

Вы можете найти хороший набор бесплатных веб-шрифтов, предоставленных Google Fonts (также есть автоматически созданные CSS @font-face правила, поэтому вам не нужно писать свои собственные).

а также предотвращает доступ людей к бесплатному скачиванию шрифта, если возможно

Нет, невозможно стилизовать текст с помощью специального шрифта, встроенного через CSS, не позволяя людям загружать его. Вам нужно использовать изображения, Flash или HTML5 Canvas, все из которых не очень практичны.

Я надеюсь, что это помогло!

Ответ 2

Чтобы убедиться, что ваш шрифт совместим с несколькими браузерами, убедитесь, что вы используете этот синтаксис:

@font-face {
    font-family: 'Comfortaa Regular';
    src: url('Comfortaa.eot');
    src: local('Comfortaa Regular'), 
         local('Comfortaa'), 
         url('Comfortaa.ttf') format('truetype'),
         url('Comfortaa.svg#font') format('svg'); 
}

Взято из здесь.

Ответ 3

Вам необходимо загрузить файл шрифта и загрузить его в свой CSS.

F.e. Я использую шрифт Yanone Kaffeesatz в своем веб-приложении.

Загружаю и использую его через

@font-face {
    font-family: "Yanone Kaffeesatz";
    src: url("../fonts/YanoneKaffeesatz-Regular.ttf");
}

в моей таблице стилей.

Ответ 4

Если вы не найдете какие-либо шрифты, которые вам нравятся из Google.com/webfonts или fontsquirrel.com, вы всегда можете сделать свой собственный веб-шрифт с помощью шрифта, который вы сделали.

вот хороший учебник: Создайте собственный шрифт для шрифтов в веб-шрифте

Хотя я не уверен, что кто-то не загрузит ваш шрифт.

Надеюсь, что это поможет,

Ответ 5

есть также интересный инструмент под названием CUFON. Там демонстрируется, как использовать его в этом блоге Это действительно просто и интересно. Кроме того, это не позволяет людям ctrl + c/ctrl + v сгенерированный контент.

Ответ 6

Я работаю над Win 8, использую этот код. Он работает для IE и FF, Opera и т.д. Я понял: шрифт woff является легким и обычным для шрифтов Google.

Перейдите здесь, чтобы преобразовать ваш ttf-шрифт в woff раньше.

@font-face
{
    font-family:'Open Sans';
    src:url('OpenSans-Regular.woff');
}

Ответ 7

Сегодня в Интернете используются четыре формата контейнера шрифтов: EOT, TTF, WOFF, и WOFF2.

К сожалению, несмотря на широкий выбор вариантов, нет единого универсального формата, который работает во всех старых и новых браузерах:

• EOT - только IE,
• TTF имеет частичную поддержку IE,
• WOFF пользуется самой широкой поддержкой, но недоступен в некоторых старых браузерах.
• Поддержка WOFF 2.0 - это работа для многих браузеров.

Если вы хотите, чтобы ваше веб-приложение имело один и тот же шрифт во всех браузерах, вы можете указать все 4 типа шрифтов в CSS

 @font-face {
      font-family: 'besom'; !important
      src: url('fonts/besom/besom.eot');
      src: url('fonts/besom/besom.eot?#iefix') format('embedded-opentype'),
           url('fonts/besom/besom.woff2') format('woff2'),
           url('fonts/besom/besom.woff') format('woff'),
           url('fonts/besom/besom.ttf') format('truetype'),
           url('fonts/besom/besom.svg#besom_2regular') format('svg');
      font-weight: normal;
      font-style: normal;
  }