Веб-страницы и шрифты штрих-кодов
-
04-07-2019 - |
Вопрос
Я работаю над небольшим приложением, в котором я могу сгенерировать список штрих-кодов.На моем компьютере установлены правильные шрифты.Прямо сейчас я печатаю их непосредственно на веб-странице, и это работает должным образом в Chrome и IE 7, но не в Firefox.Кто-нибудь знает, что Firefox будет делать иначе, чем IE и Chrome?
Вот мой код:
<html>
<head>
<title>Barcode Font Test</title>
<style type="text/css" media="screen">
.barcode { font-family: "wasp 39 m", verdana, calibri; font-size: 36pt; }
</style>
</head>
<body>
<div class="barcode">*574656*</div>
</body>
</html>
Редактировать: Вероятно, мне следовало упомянуть, что на данный момент это скорее личный проект, и он не предназначен для того, чтобы быть представленным миру.Хотя я выберу решение, которое работает, я хотел бы что-то, что не связано с Javascript / Flash / etc.
Решение
Более простым решением может быть создание изображений на стороне сервера для генерации штрих-кодов.Таким образом, вам не нужно полагаться на то, что у пользователя установлен шрифт, и вам не нужно получать доступ к шрифту в вашем html.
Другие советы
Существует несколько форматов штрих-кодов.Некоторые из них просты, а некоторые могут стать очень сложными.Одним из самых простых в использовании, если он подходит для вашего приложения, является штрих-код 3 из 9.Он не сжат, и отношение символов в штрих-коде равно 1 к 1.Существует два варианта этого, только числовой и расширенный набор, включающий альфа-код.Я продолжу с предположением, что вы можете использовать этот формат.(Из вашего примера кода похоже, что это то, что вы используете) Для простейшей реализации используйте только числовое значение.Тогда вам потребуется всего одиннадцать символов (0-9 и astrisk).Посмотрите на определение существующего шрифта 3 из 9.(Для некоммерческого использования найдите шрифт под названием FREE3OF9.Вы можете использовать это в качестве основы для своего приложения ...)
Далее, самая утомительная часть - больше работы для вас, но она отображается практически в любом браузере.Если вы не можете найти что-либо в Интернете, создайте GIF (или BMP, или PNG) изображение для каждого символа.(Не забудьте включить соответствующий пробел с правой стороны символа, чтобы отделить его от следующего символа в строке!) Его высота должна составлять всего один пиксель.Когда придет время отображать штрих-код, соедините символы следующим образом <IMG>
которые находятся рядом друг с другом.3 из 9 требует, чтобы символы в штрих-коде были окружены или обернуты символом astrisk (в любом случае, это astrisk шрифтом FREE3OF9) с каждого конца.Установите высоту <IMG>
это к чему-то достаточно высокому, чтобы соответствовать вашей распечатке.
Таким образом, установка шрифта на клиенте не требуется, но большинство декодеров штрих-кодов могут считывать результирующую графику.
Ваш пример (*574656*
) может выглядеть примерно так:
(ну, не совсем так - это сплошная графика, а не композиция из нескольких встроенных отдельных графических элементов, но идею вы уловили)
Отдельные цифровые графики выглядят следующим образом:(хотя они еще не "очищены")
*
0
1
2
3
4
5
6
7
и изменения в коде могут выглядеть следующим образом:
<html>
<head>
<title>Barcode Font Test</title>
</head>
<body>
<img src="3o9cb_ast.png" alt="*"/>
<img src="3o9cb_5.png" alt="5"/>
<img src="3o9cb_7.png" alt="7"/>
<img src="3o9cb_4.png" alt="4"/>
<img src="3o9cb_6.png" alt="6"/>
<img src="3o9cb_5.png" alt="5"/>
<img src="3o9cb_6.png" alt="6"/>
<img src="3o9cb_ast.png" alt="*"/>
</body>
</html>
Я использовал SearchFreeFonts.com в качестве ресурса, чтобы освежить мою память о том, как были отформатированы 3 из 9 символов штрих-кода.Эти графические изображения изначально взяты с этого сайта.
Разработчики Mozilla сделали выбор в пользу того, чтобы символьные шрифты не работали.Вы можете включить их в конфигурации, как описано в Как заставить символьные шрифты работать в Mozilla Firefox
В компании, в которой я сейчас работаю, мы используем BarCode.dll of lesnikowski.com.Он генерирует изображения штрих-кодов.Это не зависит от того, установлен ли шрифт на клиентском компьютере и работает ли он со всеми браузерами.
Надеюсь, это поможет.
Использование нестандартных шрифтов на веб-страницах - большая заноза в заднице.Чтобы сделать это проще, вы можете использовать сИФР или новый typeface.js.
Редактировать:Это было действительно 4 года назад, когда оно было опубликовано, но больше таковым не является.Я оставлю это здесь для потомков, но не принимайте это за правильный ответ.
У нас в моей компании такая же проблема.К счастью, шрифты штрих-кода могут использовать только 1-2 человека.
Мы обнаружили, что когда они получили новый компьютер, шрифты не работали ни в одном браузере.Они должны были открыть клиентское приложение (например, Word), выбрать шрифт штрих-кода и выполнить некоторый ввод, чтобы "инициализировать" этот шрифт.
Я думаю, лучшим решением является создание изображения штрих-кода на сервере по запросу.Проблема с этим решением может заключаться в очистке старых изображений.На мой взгляд, это решение требует больше предварительной работы, но окупается меньшим количеством текущих проблем и технического обслуживания, чем решение на стороне клиента.
Шрифты, как правило, имеют проблемы, потому что рендеринг зависит от браузера.Изображение стало лучше.Я использую Активный штрих-код Morovia Lite для создания штрих-кодов из IIS.
Просто сделай это: http://davidscotttufts.com/2009/03/31/how-to-create-barcodes-in-php/ Дэвид создал суперпростой способ реализации штрих-кодов.Вам понадобится библиотека GD, работающая в MySQL.(В MAMP и LAMP это уже должно быть установлено)