Як додати якийсь нестандартний шрифт на веб-сайт?

518

Чи можна додати на веб-сайт якийсь спеціальний шрифт без використання зображень, флеш- файлів чи іншої графіки?

Наприклад, я працював на весільному веб-сайті, і знайшов багато приємних шрифтів на цю тему. Але я не можу знайти правильний спосіб додати цей шрифт на сервер. І як я включаю цей шрифт із CSS у HTML? Чи можливо це обійтися без графіки?

html  css  fonts  font-face 
— васку
джерело
18
Оскільки це питання було задано, @font-faceвоно набуло значно більшої підтримки та рекомендується для загального використання. Ви просто повинні знати, що IE вимагає шрифтів у іншому форматі для інших браузерів. Дивіться stackoverflow.com/questions/2219916/is-font-face-usable-now
— Девід Джонстон
10
Переконайтеся, що ви маєте право поширювати шрифт!
— В'єт
2
Відвідайте typekit.com або дешевий fontsquirrel.com
— bjudson
1
— Adrien Be
3
www.fontsquirrel.com здається чудовим для створення необхідних шрифтових файлів та створення гарного синтаксису @fontface, що захищається від кулі (те саме, що рекомендовано fontspring.com/blog/fixing-ie9-font-face-problems )
— Adrien Be

Відповіді:

500

Це можна зробити за допомогою CSS:

<style type="text/css">
@font-face {
    font-family: "My Custom Font";
    src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
}
p.customfont { 
    font-family: "My Custom Font", Verdana, Tahoma;
}
</style>
<p class="customfont">Hello world!</p>

Він підтримується для всіх звичайних веб-переглядачів, якщо ви використовуєте TrueType-Fonts (TTF) або формат шрифтів Web Open (WOFF).

— вибагливі
джерело
13
І Internet Explorer, і Firefox НЕ базуються на Webkit, тому, на мою думку, це досить марне рішення.
— Каспер
58
Це не марно, оскільки це стандарт: чим більше ви його реалізуєте, тим більше, ймовірно, буде реалізовано браузерами. Це не означає, що ви не повинні знайти іншого способу компенсації, але використовувати це як доповнення мені здається гарним.
— e-satis
8
Firefox 3.1 підтримує @ font-face.
— Ms2ger
2
@brendanjerwin: оновлена ​​версія посилання - brendanjerwin.com/development/web/2009/03/03/…
— Метт Бал
60
Гей, хлопці, відгадайте, що? Зараз це майже 2016 рік! Зараз це широко підтримується! Так! Радий, що я знайшов цю відповідь пізно. Ха-ха.
— jessica
121

Ви можете додати деякі шрифти через веб-шрифти Google .

Технічно шрифти розміщуються в Google, і ви пов'язуєте їх у заголовку HTML. Потім ви можете їх вільно використовувати в CSS @font-face( читайте про це ).

Наприклад:

У <head>розділі:

 <link href=' http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>

Потім у CSS:

h1 { font-family: 'Droid Sans', arial, serif; }

Рішення здається досить надійним (навіть Smashing Magazine використовує його для назви статті. ). Однак у Каталозі шрифтів Google доступно не так багато шрифтів .

— Michał Pękała
джерело
1
У липні 2014 року google розширив шрифти та включив шрифти Google Noto, які підтримують більшість мов google.com/get/noto/# . Abobe підтримав цю ініціативу відкритого шрифту, яка підтримує всі мови blog.typekit.com/2014/07/15/introducing-source-han-sans
— vsingh
здається (веб-шрифти Google) не підтримує .eot та .woff та .svg версії шрифтів. він просто підтримує .ttf версію шрифтів!
— Махді Джазіні
77

Шлях до цього - використання декларації CSS @ font-face CSS, яка дозволяє авторам визначати онлайн-шрифти для відображення тексту на своїх веб-сторінках. Дозволяючи авторам надавати власні шрифти, @ font-face усуває необхідність залежати від обмеженої кількості шрифтів, які користувачі встановили на своїх комп’ютерах.

Погляньте на наступну таблицю:

введіть тут опис зображення

Як бачите, існує кілька форматів, про які потрібно знати, головним чином, завдяки сумісності між веб-переглядачами. Сценарій мобільних пристроїв не сильно відрізняється.

Рішення:

1 - Повна сумісність браузера

Це метод із найглибшою можливою підтримкою зараз:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

2 - Більшість браузера

Хоча речі сильно зміщуються у напрямку WOFF , тому ви, ймовірно, можете піти:

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
       url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

3 - Тільки останні веб-переглядачі

Або навіть просто WOFF.
Потім ви використовуєте його так:

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

Посилання та додаткове читання:

Це головне, що вам потрібно знати про реалізацію цієї функції. Якщо ви хочете більше вивчити цю тему, я рекомендую ознайомитись із наступними ресурсами. Більшість того, що я тут поклав, витягується з наступного

— Хав'єр Кадіс
джерело
2
Надзвичайно зручний інструмент Font Squirrel може генерувати CSS, необхідний для підтримки повного браузера. Він навіть дозволяє завантажувати шрифт як будь-який із цих форматів, перетворює його у всі інші формати та дозволяє завантажувати їх усі. Це економія життя, коли мова йде про спеціальні шрифти.
— Джейкоб Стамм
Що означає svgFontName? Чи слід змінити його на прізвище мого шрифту або залишити його таким, яким воно є?
— Герман
17

Якщо під нестандартним шрифтом ви маєте на увазі нестандартний шрифт стандартного формату, ось як це зробити, і він працює для всіх браузерів, які я перевірив досі:

@font-face {
    font-family: TempestaSevenCondensed;
    src: url("../fonts/pf_tempesta_seven_condensed.eot") /* EOT file for IE */
}
@font-face {
    font-family: TempestaSevenCondensed;
    src: url("../fonts/pf_tempesta_seven_condensed.ttf") /* TTF file for CSS3 browsers */
}

тому вам просто знадобляться шрифти ttf та eot. Деякі інструменти, доступні в Інтернеті, можуть здійснити конверсію.

Але якщо ви хочете вкласти шрифт у нестандартному форматі (растрові карти тощо), я не можу вам допомогти.

— BiAiB
джерело
1
Приклад Інтернет-інструменту: kirsle.net/wizards/ttf2eot.cgi Приклад офлайн-інструменту: code.google.com/p/ttf2eot/wiki/Demo - також слід мати можливість використовувати шрифти WOFF .
— Вільф
11

Я виявив, що найпростіший спосіб мати нестандартні шрифти на веб-сайті - це використовувати sIFR

Це передбачає використання об'єкта Flash, який містить шрифт, але він непогано погіршує стандартний текст / шрифт, якщо Flash не встановлений.

Стиль встановлений у вашому CSS, а JavaScript встановлює заміну Flash для вашого тексту.

Редагувати: (Я все ж рекомендую використовувати зображення для нестандартних шрифтів, оскільки sIFR додає час проекту та може вимагати обслуговування).

— Метт
джерело
24
Яка жахлива ідея! У моєму браузері є спалах, але флешблок теж. На цьому веб-сайті в моєму веб-переглядачі відображається жахлива сторінка. Flash повинен залишатися чимось, що ви використовуєте для великих анімацій або фільмів. Занадто багато спалаху є дуже неприємним та візуальним, мій мій ...
— e-satis
2
@ e-satis: Як так? Особисто я ніколи не помічаю різниці між сторінкою, яка використовує sIFR, і тією, яка не має, окрім тонких відмінностей відображення тексту. Я думаю, що це чудова ідея, чесно кажучи, хоча @font-faceнабагато краще, коли підтримується.
— Саша Чедигов
"Редагувати: (я все ж рекомендую використовувати зображення для нестандартних шрифтів, оскільки sIFR додає час проекту та може потребувати обслуговування)." дуже добре сказано. sIFR - це дійсно класна методика, але, здається, потрібно багато, щоб отримати ТОЧНИЙ вигляд, який ви хочете. Якщо у вас є час вивчити та опанувати цю техніку, я б дуже рекомендував її. Але якщо ви шукаєте швидку і просту техніку заміни шрифту, я б застосував заміну зображення або навіть властивість @ font-face css
— Derek Adair
10

Typeface.js та Cufon - це ще два цікавих варіанти. Це компоненти JavaScript, які надають спеціальні дані шрифту у форматі JSON (які ви можете конвертувати з форматів TrueType або OpenType на своїх веб-сайтах) через новий елемент <canvas> у всіх нових браузерах, окрім Internet Explorer та через VML в Internet Explorer.

Основна проблема обох (на даний момент) полягає в тому, що вибір тексту не працює або принаймні працює лише досить незграбно.

Тим не менш, це дуже приємно для заголовків. Текст тексту ... Я не знаю.

І це напрочуд швидко.

— Томас
джерело
Ще один цікавий варіант - typekit.com Подібна концепція.
— Зак
8

Або ви можете спробувати sIFR . Я знаю, що він використовує Flash, але лише за наявності. Якщо Flash недоступний, він відображає оригінальний текст у оригінальному шрифті (CSS).

— Каспер
джерело
4

Техніка, яку рекомендував W3C для цього, називається "вбудовування" і добре описана трьома статтями тут: Вставлення шрифтів . У своїх обмежених експериментах я виявив, що цей процес схильний до помилок і мав обмежений успіх у тому, щоб він функціонував у середовищі з багатьма браузерами.

— Стів Мойєр
джерело
4

І Safari, і Internet Explorer підтримують правило CSS @ font-face, проте вони підтримують два різні вбудовані типи шрифтів. Firefox планує незабаром підтримати той же тип, що і Apple. SVG може вбудовувати шрифти, але це ще не так широко підтримується (без плагіна).

Я думаю, що найбільш портативне рішення, яке я бачив, - це використовувати функцію JavaScript для заміни заголовків тощо із зображенням, створеним та кешованим на сервері, на вибраний вами шрифт - таким чином ви просто оновлюєте текст і не потрібно речі навколо у Photoshop.

— zobier
джерело
Це не потрібно робити з JavaScript. Я знаю, що сьогодні багато людей люблять використовувати JavaScript для досить багатьох речей, але тут може бути більш доречною стандартна техніка CSS. Дивіться sitepoint.com/article/header-images-css-xhtml
— хан
Вибачте, якщо є плутанина, методика стосується не методу заміни зображення, який, як ви кажете, може бути CSS. Йдеться про створення графіки, що представляє заданий рядок у певному шрифті / стилі, на льоту, на сервері, - усуваючи необхідність їх створення вручну.
— zobier
4

Якщо ви використовуєте ASP.NET, генерувати шрифти, засновані на зображенні, дуже просто, не маючи фактично встановлювати (як при додаванні до встановленої бази шрифтів) шрифти на сервері, використовуючи:

PrivateFontCollection pfont = new PrivateFontCollection();
pfont.AddFontFile(filename);
FontFamily ff = pfont.Families[0];

а потім малюйте цим шрифтом на a Graphics.

— матовий
джерело
1
ну так ... І ви, користувач, можете забути про копіювання та вставлення. І масштабування теж у старих браузерах. Я навіть не говорю про проблеми пропускної здатності!
— e-satis
2
Так, добре, і в питанні було вказано, що він буде використовувати його для змістовного тексту? Ні, це не було, це було загальне питання, і це була загальна відповідь. Невеликі фрагменти тексту, заголовки тощо не займають багато пропускної здатності. Шееш, зчепись!
— матовий
3

Схоже, він працює лише в Internet Explorer, але швидкий пошук Google за "html-вбудовуючими шрифтами" дає http://www.spoono.com/html/tutorials/tutorial.php?id=19

Якщо ви хочете залишатися платформово-агностичним (і вам слід!), Вам доведеться використовувати зображення, або ж просто використовувати стандартний шрифт.

— Джеймс Мускат
джерело
3

Я трохи дослідив і розкопав динамічну заміну тексту (опубліковано 2004-06-15).

У цій техніці використовуються зображення, але, схоже, це "вільні руки". Ви пишете текст, і ви дозволяєте декільком автоматизованим сценаріям робити автоматичне пошук і заміну на сторінці для вас на ходу.

Він має деякі обмеження, але це, мабуть, один із простіших варіантів (і більш сумісних із браузером), ніж усі інші, що я бачив.

— Кент Фредрік
джерело
3

Можна також використовувати шрифти WOFF - приклад тут

@font-face {
font-family: 'Plakat Fraktur';
src: url('/resources/fonts/plakat-fraktur-black-modified.woff') format('woff');
font-weight: bold;
font-style: normal;
 }
— Вільф
джерело
3

Просто наведіть посилання на фактичний шрифт на зразок цього, і вам буде добре

<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Montserrat'   rel='stylesheet'>
<style>
body {
font-family: 'Montserrat';font-size: 22px;
}
</style>
</head>
<body>

<h1>Montserrat</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>


</body>
</html>
— Абхієет Кумар
джерело
Хороша проста альтернатива. І ви впевнені, що маєте права користуватися ним. Дивіться developers.google.com/fonts/docs/getting_started
— Тім Еріксон,
2

Typeface.js Спосіб JavaScript:

За допомогою typeface.js ви можете вбудовувати власні шрифти у свої веб-сторінки, щоб не потрібно перетворювати текст у зображення

Замість того, щоб створювати зображення або використовувати флеш лише для показу графічного тексту вашого сайту потрібним шрифтом, ви можете використовувати typeface.js та писати звичайним HTML та CSS так, як якщо б у ваших відвідувачів шрифт встановлено локально.

http://typeface.neocracy.org/

— баккал
джерело
2

Якщо у вас є файл вашого шрифту, вам потрібно буде додати більше форматів цього шрифту для інших браузерів.

Для цього я використовую генератор шрифтів, як Fontsquirrel, він надає всі формати шрифту та його @ font-face CSS, вам потрібно буде лише просто перетягнути його у свій файл CSS.

— saadeez
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.