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

80

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

Дякую!

javascript  html  flash  fonts  embed 
— Ден Розенстарк
джерело
— hakre
можливий дублікат шрифтів в Інтернеті
— 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.

— savetheclocktower
джерело
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 за допомогою того ж механізму. У списку окремо про це добре обговорювались деякий час тому .

— olliej
джерело
3

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

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

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

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