Як я можу зробити так, щоб шрифти відображалися однаково у різних веб-браузерах?


11

Я будую веб-сайт для клієнта, і ми сподівалися використовувати звичайний текст, а не зображення на панелі навігації. Шрифт, який ми використовуємо, є Century Gothic (я вважаю, що цей шрифт доступний на більшості ПК та Macs). Проблема полягає в тому, що в різних браузерах візуалізація шрифту значно відрізняється. У Chrome ми виглядали так, як ми хочемо, але в Firefox текст менший і сміливіший.

Крім написання специфічного для браузера javascript для зміни властивостей шрифту, чи є інші варіанти стандартизації способу візуалізації шрифтів крос-браузера. Можливо, якась бібліотека чи API? Можливо, справа в тому, щоб бути більш конкретним у декларуванні властивостей шрифту? Чесно кажучи, я застряг і потребую допомоги.

Відповіді:


13

Ви не збираєтеся отримувати шрифти та деякі інші речі, щоб ідентично відображатись у веб-переглядачах. Досконалий приклад - обробка шрифтів. Я знаю, що Safari в Windows чомусь любить робити текст жирним. На жаль, так працює Інтернет. Різноманітність веб-переглядачів, ОС, моніторів, графічних процесорів тощо, означає, що потенційно тисячі чи десятки тисяч різних способів перегляду веб-сторінки може бути. Отже, будуючи Wbe, ви повинні це робити, знаючи і розраховуючи, що ваш сайт не буде ідеальним для всіх пікселів. Це не друк. Це дика дика павутина.


Так, здається, що це нещасна реальність. Однак здається, що хтось повинен мати можливість написати фрагмент javaScript, який зробить речі трохи ближче до нормалізованих.
Зах Лісобей

На жаль, це не проблема коду, а проблема програмного та апаратного забезпечення. Так розвиваються веб-переглядачі, і з прискоренням апаратного прискорення буде погіршуватися (хоча ваші шрифти виглядатимуть плавніше для тих, у кого це включено).
Джон Конде

1
Ця стаття (та інші з цієї ж серії) дуже детально пояснює проблеми, якщо вам цікаво. blog.typekit.com/2010/12/17/…
paulmorriss

Вибрали свою відповідь як найкращу. Ви говорите, що це не проблема коду, але, безумовно, хтось може написати код, щоб один рядок тексту був розтягнутий до мінімальної ширини в пікселях. Це саме б значно покращило цю ситуацію. Це може перевірити виведену <p> ширину і відповідно збільшити інтервал літер. Можливо?
Зах Лісобей

@Zach - Ви можете подолати безліч перешкод за допомогою певного планування та розумного кодування точно. Але врешті-решт ми можемо мати лише так багато контролю. В основному, якщо ви можете прийняти такі проблеми, як Safari в Windows та кодувати навколо себе все, що вам слід.
Джон Конде

1

Насправді існує метод вбудовування шрифтів у ваш CSS. Це надзвичайно просто. Щоб дізнатися, як це зробити, зверніться до http://randsco.com/index.php/2009/07/04/p680 . Недоліком цього є те, що старі браузери (попередньо 7 та ff 3, я думаю ...) не підтримують цього. Але кількість людей, які користуються цими старими браузерами, швидко зменшується, і все одно можна вказати альтернативні шрифти, які б працювали і зазвичай є на більшості ПК на всякий випадок.

Інший підхід, який я не використовував, передбачає використання flash. У мене немає іншої інформації про це, крім того, що я знаю про неї.


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

Цей метод Flash називається sIFR . У цьому є свої плюси і мінуси.
Джон Конде

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

1

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

Скидання CSS. Концепція проста, ви встановлюєте за замовчуванням HTML теги в таблиці стилів, щоб встановити загальну вихідну точку для візуалізації HTML. Ось стаття та приклад: http://meyerweb.com/eric/tools/css/reset/

Декларація доктіп. http://htmlhelp.com/tools/validator/doctype.html

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