Використовуєте власні шрифти за допомогою 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 , і все це не дуже практично.

Я сподіваюся, що це допомогло!

Щоб переконатися, що ваш шрифт сумісний між веб-переглядачами, переконайтеся, що ви використовуєте цей синтаксис:

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

Перейдіть сюди, щоб раніше перетворити свій шрифт ttf в 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;
}