Веб-страницы и шрифты штрих-кода
Я работаю над небольшим приложением, в котором могу создать список штрих-кодов. На моем компьютере установлены правильные шрифты. Прямо сейчас я печатаю их прямо на веб-странице, и они правильно работают в 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 / и т. д.
Конечно, кроссбраузерность не является необходимостью. Однако я в основном использую Firefox и не понимаю, почему это единственный браузер, с которым у меня возникают проблемы.
Я уже сталкивался с этой коллекцией @Font Face Barcode Веб-шрифты от barcoderesource.com ранее.
Ответы 9
Использование нестандартных шрифтов на веб-страницах - большая головная боль. Чтобы упростить задачу, вы можете использовать sIFR или новый typeface.js.
Обновлено: это было актуально 4 года назад, когда оно было опубликовано, но больше не работает. Я оставлю это здесь для потомков, но не принимайте это как правильный ответ.
Верно, но это не та проблема, с которой сталкивается Родей. Он сказал, что этот шрифт установлен на его компьютере, и этот вопрос заставляет думать, что тесты, которые он провел, были выполнены на его локальной машине.
Что ж, даже в этом случае мой ответ может быть полезен тем, кто хочет полностью открытое для общественности решение.
В компании, над которой я работаю, мы используем BarCode.dll с сайта lesnikowski.com. Он генерирует изображения штрих-кода. Это не зависит от того, установлен ли шрифт на клиентском компьютере и работает ли он со всеми браузерами.
Надеюсь это поможет.
Разработчики Mozilla решили, что символьные шрифты не работают. Вы можете включить их в конфигурации, как описано в Получение символьных шрифтов для работы в Mozilla Firefox
Это не работает для Firefox 3. Автор не указывает, для каких версий Firefox это работает.
В моей компании такая же проблема. К счастью, только 1-2 человека когда-либо должны использовать шрифты штрих-кода.
Мы обнаружили, что когда они получали новый компьютер, шрифты не работали ни в одном браузере. Им нужно было открыть клиентское приложение (например, Word), выбрать шрифт штрих-кода и набрать текст, чтобы «инициализировать» этот шрифт.
На мой взгляд, лучшим решением будет создание изображения штрих-кода на сервере по запросу. Проблема с этим решением может заключаться в очистке старых изображений. Это решение требует больше предварительной работы, но, на мой взгляд, окупается меньшим количеством текущих проблем и обслуживания, чем решение на стороне клиента.
Более простым решением может быть создание на стороне сервера изображений для генерации штрих-кодов. Таким образом, вам не нужно полагаться на пользователя, у которого установлен шрифт, и вам не нужно обращаться к шрифту в вашем html.
Есть несколько форматов штрих-кода. Некоторые из них простые, а некоторые могут быть очень сложными. Один из самых простых в использовании, если он подходит для вашего приложения, - это штрих-код 3 из 9. Он не сжат и имеет отношение 1 к 1 к символам в штрих-коде. Есть два варианта этого: только числовой и расширенный набор, включающий альфа-кодировку. Я продолжу предположение, что вы можете использовать этот формат. (Судя по вашему образцу кода, это именно то, что вы используете) Для простейшей реализации придерживайтесь только числовых значений. Тогда вам потребуется всего одиннадцать символов (0–9 и астриск). Посмотрите на определение существующего шрифта 3 из 9. (Для некоммерческого использования найдите шрифт FREE3OF9. Вы можете использовать его в качестве основы для своего приложения ...)
Затем утомительная часть - больше работы для вас впереди, но отображается практически в любом браузере. Если вы не можете найти что-либо в Интернете, создайте изображение в формате GIF (или BMP, или PNG) для каждого символа. (Не забудьте включить правильное белое пространство с правой стороны символа, чтобы отделить его от следующего символа в строке!) Он должен быть высотой всего в один пиксель. Когда придет время отображать штрих-код, соедините символы вместе как <IMG>, которые находятся рядом друг с другом. 3 из 9 требует, чтобы символы в штрих-коде были окружены или обернуты астрисками (в любом случае это астриск в шрифте 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 символов штрих-кода. Эти изображения изначально взяты с этого сайта.
У шрифтов обычно возникают проблемы, потому что рендеринг выполняется через браузер. Изображение лучше. Я использую Штрих-код Morovia Active Lite для создания штрих-кодов из IIS.
Просто сделайте это: http://davidscotttufts.com/2009/03/31/how-to-create-barcodes-in-php/ Дэвид создал супер-простой способ внедрения штрих-кодов. Вам понадобится библиотека GD, работающая в MySQL. (МАМПЫ И ЛАМПА должны быть уже установлены)
Многое изменилось с тех пор, как был задан этот вопрос. Сегодня довольно просто использовать шрифт штрих-кода в Интернете и напрямую отображать его.
Запустите приведенный ниже фрагмент кода, чтобы увидеть живой пример:
.barcode39 {
font-family: 'Libre Barcode 39 Extended Text', cursive;
font-size: 40px;
}<link href = "https://fonts.googleapis.com/css2?family=Libre+Barcode+39+Extended+Text&display=swap" rel = "stylesheet">
<div class = "barcode39">
*hello world*
</div>
Если это личный проект, зачем ему кроссбраузерность?