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

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

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

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

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

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

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

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

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

@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.

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

Я загружаю и использую это через

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

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

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

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

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

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

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

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

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

Пойди сюда, чтобы конвертировать ттф шрифт в woff.

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

Прежде всего, вы не можете запретить людям загружать шрифты, кроме случаев, когда они ваши, а это обычно занимает месяцы. И нет смысла запрещать людям использовать шрифты. Множество шрифтов, которые вы видите на веб-сайтах, можно найти на бесплатных платформах, таких как я упомянул ниже.

Но если вы хотите внедрить шрифт в ваш сайт, прочитайте это: Существует довольно простой и бесплатный способ внедрения шрифтов на ваш сайт. Я бы порекомендовал Google шрифты, потому что он бесплатный и простой в использовании. Например, я буду использовать шрифт Bangers от Google. ( Https://fonts.google.com/specimen/Bangers?query=bangers&sidebar.open&selection.family=Bangers ) Вот как это будет выглядеть: HTML

<head>
<link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet">
</head>

CSS

body {
font-family: 'Bangers', cursive;
}