Як вставляти шрифти в HTML?


80

Я намагаюся знайти гідне рішення (особливо з боку SEO) для вбудовування шрифтів у веб-сторінки. Поки що я бачив рішення W3C , яке навіть не працює у Firefox, і це досить круте рішення . Друге рішення - лише для заголовків. Чи доступне рішення для повного тексту? Я втомився від стандартних шрифтів для веб-сторінок.

Дякую!



можливий дублікат шрифтів в Інтернеті
user2284570

2
@ user2284570 На це питання є краща відповідь. Я закрив інший як дублікат цього.
Привид

Будь-які оновлені відповіді на це питання? Усім відповідям вже понад пів десятиліття. Крім того, я не зміг знайти посилання на MDN, якщо хтось знає.
1,21 гігават

Будь ласка, надайте оновлену відповідь і допоможіть Світу. Я сам не працював з HTML з 2011 року
Ден Розенстарк,

Відповіді:


134

Речі змінилися з тих пір, як це питання було спочатку задано та відповідено. Проведено великий обсяг роботи над тим, щоб вбудовувати шрифт між браузерами, щоб основний текст працював за допомогою вбудовування @ font-face.

Пол Ірландський склав синтаксис Bulletproof @ font-face, поєднуючи спроби кількох інших людей. Якщо ви насправді проглядаєте всю статтю (а не лише верхню), це дозволяє одному висловленню @ font-face охоплювати IE, Firefox, Safari, Opera, Chrome та, можливо, інші. В основному це може подавати OTF, EOT, SVG та WOFF способами, які нічого не порушують.

Вилучено з його статті:

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('Graublau Web Regular'), local('Graublau Web'),
    url("GraublauWeb.woff") format("woff"),
    url("GraublauWeb.otf") format("opentype"),
    url("GraublauWeb.svg#grablau") format("svg");
}

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

Soma Design також створив FontFriend Bookmarklet , який перевизначає шрифти на сторінці на льоту, щоб ви могли спробувати щось інше. Він включає підтримку перетягування @ font-face у FireFox 3.6+.

Зовсім недавно Google почав надавати веб-шрифти Google - асортимент шрифтів, доступних за ліцензією з відкритим вихідним кодом та обслуговуваних із серверів Google.

Обмеження ліцензії

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


11
Я думаю, що варто підкреслити, що вам не дозволяється автоматично брати шрифт та @ font-face-ize, навіть якщо ви придбали ліцензію на цей шрифт законно і за великі гроші. Вам потрібно перевірити ліцензію на шрифт, чи дозволено такий вид електронного розповсюдження чи ні. Порушення настільки легко виявити та простежити, тому що в іншому випадку можуть виникнути проблеми, особливо якщо ви є компанією, яка знаходиться у відповідній юрисдикції.
Пекка

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

Захоплюючі речі. З цікавості, як ви потрапили на цей пост? Цього ж дня було більше однієї відповіді та кілька коментарів до вашої відповіді. +1 ...
Ден Розенстарк

1
Я не пам’ятаю, як я опинився на ньому - можливо, шукав шрифт HTML, але я відповів, тому що я працював саме над цим для клієнта перед Різдвом, тому інформація була свіжою. Я припускаю, що Пекка розглядав це як нову діяльність на старому посту; Я не знаю, чи намагається системний прапор розміщувати кілька посилань (я знаю, що спочатку він заблокований), але я припустив, що це може бути "перевірити це, щоб переконатися, що це не хтось спамує".
стовп для забору

@Pekka "порушення так легко виявити та відслідкувати" ... чи можете ви трохи мене просвітлити, будь ласка ... як би це було здійснено та виявлення та тралювання, і за яких обставин це могло б статися?
Dan Rosenstark,

9

Спробуйте Facetype.js , ви перетворюєте шрифт .TTF у файл Javascript. Повна SEO-сумісність, підтримує FF, IE6 та Safari і витончено погіршує роботу інших браузерів.


2
Для тих, хто цікавиться, як це працює, він використовує тег canvas (html 5) або VML.
Chris S

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

1
Це посилання мертве.
aleclarson

6

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

Microsoft має WEFT , власну запатентовану технологію вбудовування шрифтів, але я не чув про неї багато років, і я не знаю нікого, хто її використовує.

Я обіходжу sIFR для типу відображення (заголовки, заголовки публікацій у блозі тощо) та використовую один із менш зношених веб-безпечних шрифтів для типу фігури (наприклад, Trebuchet MS). Якщо вам набридли всі безпечні в Інтернеті шрифти, ви, мабуть, визначаєте цей термін занадто вузько - подивіться на цю матрицю фондових шрифтів, що постачаються з основними ОС, і, швидше за все, ви зможете знайти каскад шрифтів, який ловити майже всіх користувачів Інтернету.

Наприклад: font-family: "Lucida Grande", "Verdana", sans-serifє загальним каскадом шрифтів; OS X поставляється з Lucida Grande, але ті, хто має Windows, отримають Verdana, веб-безпечний шрифт із літерами, подібними до розміру та форми Lucida Grande. Користувачі Linux також отримають Verdana, якщо вони встановили веб-безпечний пакет шрифтів, який існує у більшості менеджерів пакунків дистрибутивів, інакше вони повернуться до звичайної sans-serif.


2
Дозвольте мені також постояти хвилинку на мильниці: хоча я хотів би, щоб у Windows було більше "хороших" шрифтів (OS X має найбільші хіти історії типографіки: Futura, Helvetica, Gill Sans тощо), це добре, що ми маємо щоб стримуватися при підборі шрифтів. Свободу можна використовувати і для зла.
savetheclocktower

Коментарів до Вашого коментаря немає, але дякую за відповідь. Це чудово. Чи є десь список каскадів? Знову дякую.
Dan Rosenstark,

Ось один список: ( ampsoft.net/webdesign-l/WindowsMacFonts.html ). Він консервативний, перелічуючи лише шрифти, однакові (або майже такі) на різних платформах. Можливо, вам доведеться провести порівняння, щоб побачити, який "безпечний" шрифт найбільше схожий на ваш "ризикований" шрифт.
savetheclocktower

(О, також: завжди вказуйте загальний резервний варіант - sans-serif, serif або monospace. Таким чином, він, принаймні, буде знаходитися на стадіоні, якщо у користувача не буде жодного із ваших запитуваних шрифтів.)
savetheclocktower

1
Більшість користувачів, які заходять на сайти, на яких я працюю, як і раніше використовують IE6 (ці сволочі). Тому з цієї точки зору я вважаю, що останні найважливіші версії є непрохідними.
Gene

4

І це також малоймовірно - EOT - це досить обмежувальний формат, який підтримується лише IE. Як Safari 3.1, так і Firefox 3.1 (а також поточна альфа-версія) і, можливо, Opera 9.6 підтримують вбудовування шрифтів справжнього типу (ttf), і принаймні Safari підтримує шрифти SVG за допомогою того ж механізму. У списку окремо про це добре обговорювались деякий час тому .


3

Перегляньте комерційний варіант Typekit (у них також є безкоштовний пакет).

Він використовує різні методи, залежно від того, який браузер використовується ( @font-faceпроти EOTформату), і вони також вирішують усі питання ліцензування шрифтів. Він підтримує все до IE6.

Ось трохи більше інформації про те, як працює Typekit:


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