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

Я видел некоторые новые веб-сайты, которые используют пользовательские шрифты на своих сайтах (кроме обычных Arial, Tahoma и т. д.).

и они поддерживают хорошее количество браузеров.

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

7 ответов


В общем, вы можете использовать пользовательский шрифт, используя @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 (также имеет автоматически сгенерированный CSS @font-face правила, поэтому вам не нужно писать свои собственные).

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

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

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


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

@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'); 
}

принято от здесь.


вы должны загрузить файл шрифта и загрузить его в свой CSS.

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

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

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

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


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

вот хороший учебник: сделайте свой собственный шрифт face web font kit

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

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


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


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

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

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

сегодня в интернете используются четыре формата контейнеров шрифтов: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;
  }