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

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

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

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

7 140
css font-face

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, не позволяя людям загружать его. Вам нужно использовать изображения, вспышку или HTML5 Canvas, все из которых не очень практическое.

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

300

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

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

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

24

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

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

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

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

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

22

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

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

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

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

4

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

4

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

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

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

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

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

  • EOT только IE,
  • TTF имеет частичную поддержку IE,
  • музыка пользуется широкой поддержкой, но не доступен в некоторых старых браузеры
  • музыка поддержка 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;
  }
1