Некоторые объекты символов HTML являются ОГРОМНЫМИ только в Firefox

По какой-то причине в моем Firefox 12.0 для Mac OS X мои символы 〉 ( ) намного крупнее, чем должны быть. В Chrome и Safari они выглядят именно так, как я хочу.

У меня есть AddDefaultCharset utf-8в моем .htaccess, а также в моем (поскольку группа, которой я доставляю эти файлы, может не использовать мой .htaccess).

Кроме того, согласно Adobe's Browser Lab, IE 7 и 8 просто отображают квадратную рамку... могу ли я заставить эти браузеры поддерживать этот символ? Это значительно упростило бы задачу (поскольку цвета будут меняться, поэтому изображения очень неудобны, и цвета не исчезают с изображениями).

Демо: http://cameronspear.com/demos/rang/

Вот что я вижу в Chrome и ожидаю увидеть:

Chrome

Вот что показывает мой Firefox:

Firefox

Это это скриншот из Browse Labs для IE8:

IE8

TL;DR:Я хочу, чтобы все эти скриншоты выглядели как первый, используя символы 〉 aka . Использование JavaScript было бы даже приемлемым.

Спасибо.

[править] Я должен указать, что не так важно, что у меня есть символ , так как я могу изменить его цвет с помощью CSS и сделать так, чтобы он выглядел одинаково в разных браузерах.


Решение

Я просто хотел поделиться тем, что я сделал, для потомков.

Благодаря советам и ресурсам Pointy я создал свой собственный SVGс помощью Inkscape, используя шаблон и методы, описанные в разделе «Как создать свой собственный значок веб-шрифта. ]». Я сопоставил большую угловую скобку с Xи маленькую с x.

Единственное, с чем я столкнулся, это то, что мой угол должен касаться базовой линии и идти только примерно на 72% пути к верхней части коробки, чтобы соответствовать «в линию», поэтому заглавная X была моей первоначальной слишком большой, и нижний регистр x был более встроенным.

Затем я преобразовал свой SVG в TTFс помощью http://www.freefontconverter.com/и преобразовал в веб-шрифт с помощью http://www.fontsquirrel. com/fontface/generator

... и все.

Демонстрационная версия ( http://cameronspear.com/demos/rang/) все еще доступна. Вы можете видеть, что он выглядит одинаково во всех браузерах, а анимация поворота по клику чертовски близка к цели и т. д.

[Обновление]Я нашел отличный ресурс под названием IcoMoon, который помогает создавать шрифты и упорядочивать шрифты для Интернета, и он принимает обычные векторы SVG, поэтому вы можете сделать это в Illustrator. и не связывайтесь с Inkscape, так как IcoMoon обрабатывает раскладку клавиатуры и прочее. Вы можете экспортировать только те значки, которые используете, поэтому вы загружаете только 3 или 4 значка, если это все, что вам нужно, а не весь шрифт.

Он стал бесценным ресурсом, и я рекомендую всем, кто хочет познакомиться с Icon Fonts, ознакомиться с ним.Вы можете узнать больше обо всем процессе из 113-го скринкаста CSS-Trick.

7
задан Jeromy French 15 February 2013 в 23:47
поделиться