Web pages and barcode fonts
A simpler solution might be to generate images server side to generate the bar codes. That way you don't have to rely on the user having a font installed and you don't have to access the font in your html.
Display Code128 In a Web page using font (not image nor javascript)
The font
tag is really old and should not be used. It's officially not supported at all in HTML5. It's better to use the face from CSS, but you have to use the right name. Also, the font would have to be installed on the client PC.
Maybe better: you can also declare a font face in CSS, so the font file is downloaded from your server, since the barcode font is not commonly available.
You can define a font in CSS using the @font-face
rule. You can then use this face in your CSS. You will have to have the font files in different formats. For common use, woff
and woff2
will do. You can convert the downloaded ttf file to woff using any of the online font converters. Googling for 'convert ttf to woff' will give you a dozen.
@font-face {
font-family: 'Code128';
src: url('code128.woff2') format('woff2'),
url('code128.woff') format('woff');
}
After that, you can use it in CSS like this:
.barcode {
/* Use the name of the face that is installed, or the one you defined above */
font-family: 'Code128';
}
You can then apply the font to any element by using the class name:
<span class="barcode">code</span>
There is a good tutorial with much more details and better browser fallbacks to be found on CSSTricks.com.
Fre3of9x Barcode font, won't load
The reason you're getting the decode error is because the font actually is corrupt. Running it through TTX (a utility for switching font representations between binary and XML form) gives us this:
> ttx FRE3OF9X.TTF
Dumping "FRE3OF9X.TTF" to "FRE3OF9X.ttx"...
Dumping 'GlyphOrder' table...
Error: cmap subtable is reported as having zero length:
platformID 1, platEncID 0, format 0 offset 20. Skipping table.
Dumping 'head' table...
Dumping 'hhea' table...
Dumping 'maxp' table...
Dumping 'OS/2' table...
Dumping 'hmtx' table...
Error: cmap subtable is reported as having zero length:
platformID 1, platEncID 0, format 0 offset 20. Skipping table.
Dumping 'cmap' table...
Dumping 'loca' table...
Dumping 'glyf' table...
Dumping 'name' table...
Dumping 'post' table...
As the cmap
structure contains the information about which character a font supports, a broken cmap subtable is a terminal error. You can try to derive the broken data from other cmap subtables (which is what Photoshop is probably doing) but that's not guaranteed to do the right thing. Browsers err on the side of caution, so this font is simply going to get rejected.
What to do: 1. report this font as broken to the website so they can either have it fixed or removed, 2. pick a new font (I see you already did that), and 3. probably grab yourself a copy of TTX for checking bad fonts in the future.
How to print barcode 39 on firefox
Try this:
@media screen {
.code39{
font-family:"Barcode 39";
font-size :50px;
}
}
@media print {
.code39{
font-family:"Barcode 39";
font-size :50px;
}
}
The @media rule, introduced in CSS2, made it possible to define different style rules for different media types.
Examples: You could have one set of style rules for computer screens, one for printers, one for handheld devices, one for television-type devices, and so on.
See CSS3 Mediaqueries for more informations.
A print stylesheet formats a web page so when printed, it automatically prints in a user-friendly format. Print stylesheets have been around for a number of years and have been written about a lot. Yet so few websites implement them, meaning we're left with web pages that frustratingly don't properly print on to paper.
It's remarkable that so few websites use print stylesheets as:
Print stylesheets enormously improve usability, especially for pages with a lot of content (such as this one!)
They're phenomenally quick and easy to set up
Some websites do offer a link to a print-friendly version of the page, but this of course needs to be set up and maintained. It also requires that users notice this link on the screen, and then use it ahead of the regular way they print pages (e.g. by selecting the print button at the top of the screen). Print-friendly versions are however useful when printing a number of web pages at the same time such as an article that spans on to several web pages.
Source Print stylesheet - the definitive guide
Print Using Barcode Font
If you are wanting to stick to human readable characters you should use Code 128 'B'.
This is what I get in Code 'B':
Font not appearing
it was resolved by using following tag in the Head of the redirected page
<meta http-equiv="x-ua-compatible" content="IE=10" />
this tag was present in the master page as well.
Why Is the Barcode In My Crystal Report PDF Visible When I View it Locally But Not Visible When Viewed From the Web Server?
After probably spending 2+ days on this, I found the solution, which can only be attributable to Divine intervention. After countless tweaks to the report server, my report, file paths, framework versions, security settings, and registry keys the fix wound up taking all of 5 seconds.
When installing the Code39 barcode font, I only needed to right click on the icon and select the "Install for All Users" option. Alas that I didn't see this during my first install! Even though I had gone in to the font security settings and given all users permissions, this wasn't enough. It turns out it must be installed for all users.
Hopefully this helps someone in the future and prevents you from wasting an obscene amount of hours on a barcode font!
Related Topics
How to Autoscale the Font Size to Fit the Contents of a Div
How to Change Background Image Based on Screen Size, Possibly with Bootstrap
How to Set Fill and Stroke Colors and Opacity on Vml Paths Using CSS
Twitter Bootstrap: Add Media Queries for Xxs Breakpoint
How to Make a Color Wheel Structure with CSS
How to Create a Lollipop Shape by Stacking Divs in a Circular Manner
Svg Symbols Not Being Displayed in Firefox
Make Table Header Fixed When Scrolling
How to Detect Lack of Position:Fixed in a Generic Way
Border-Radius on Two Overlapping Elements; Background Shines Through
Can One Pixelate Images with an Svg Filter
Clip-Path Does Not Work with Chrome
How to Scroll Through a Div Without the Scrollbars Showing
How Often Is the Default Font Size in the Browser Not 16Px
@Font-Face Being Ignored by IE7