View Output

Output Image

Local host output

Output Image

ASP.NET localhost port output

Font Embedding for the Web

It allows the fonts used in the creation of a document to travel with that document, ensuring that a user sees documents exactly as the designer intended them. Font embedding technology was built into Microsoft Internet Explorer version 4, bringing embedded fonts to the Web. Font embedding on the web is currently a hot topic and we expect this area to continue to evolve. More...

About Barcode Handling

In our example, we are using IDAutomationHC39M (true type) Barcode font and it is also available in my source code. Scanners look for this character to know where to start and stop reading the barcode. It is represented in this font with the '*' or '!' character. So, to create a barcode for the text "ABC123" you have to type out "*ABC123*" or "!ABC123!". Note that barcode readers will not include the *'s or !'s in the text they return. They will just give you the "ABC123". Please do not use space between start and stop characters.

IDAutomationHC39M (true type) install font in your font directory. (Copy font->open control panel->open font->paste)

Steps for Creating Font Embedded Project

  1. Download WEFT and install.
  2. Create folder name "WEFT" on C: drive.
  3. Create HTML file name test.htm file in "WEFT" folder.
    <html>
    <head>
    <title>Font Embedding Example</title>
    <style type="text/css">
    /*create class to embed font in last.*/
    <style/>
    </head>
    <body>
    <h3>Here we are embedding font which type is barcode.</h3>
      <span>!2546!</span><br />
    </body>
    </html>
  4. Open your IIS create virtual director name "nt"
    1. OPEN IIS -> Right click on Default Web Site
    2. Select New -> Virtual Directory -> Next
    3. Type Alias (in our case "nt") -> Next
    4. Browse & Select Path (C:\WEFT\) -> OK -> Next -> Next -> Finish

    step1

  5. Open "WEFT" application and click on New.

    step1

  6. Select test.htm from location file://c:\weft\test.htm and click on next:

    step2

  7. Check "Skip analysis" and click on New.

    step3

  8. Click on add button and select font, in our case.

    step4

  9. Click on OK.

    step4

  10. Click on Next. Check "Create font declaration with relative URLs" and second "Show CSS @font-family declarations"

    step4

  11. Click on Edit and add your other URL.

    step4

  12. Click on OK. You can add more URLs in this step (Example, http://www.yourdomain.com,http://localhost:1225/test/.

    step4

  13. Click on Next.

    step4

  14. Copy style and paste in style block of test.htm page, click on Next.

    step4

  15. Click on Cancel, then Next and Finish. And check your C:\WEFT\ folder, you will find font embedded file and file extension will be *.eot.
  16. Open location C:\WEFT\ and edit your test.htm.
    <html>
    <head>
    <title>Font Embedding Example</title>
    <style type="text/css">
      @font-face {
        font-family:  IDAutomationHC39M;
        font-style:  normal;
        font-weight: normal;
        src: url(http://localhost/nt/IDAUTOM0.eot);
      }
    <style/>
    </head>
    <body>
    <h3>Here we are embedding font which type is barcode.</h3>
      <span style="font-family:IDAutomationHC39M;" >!2546!</span><br />
    </body>
    </html>
  17. Finally, type URL in Internet Explorer on address bar "http://localhost/nt/test.htm and press enter key.
  18. Now open Visual Studio, create blank solution and add new website and run.
  19. Check Visual Studio port (in our case: http://localhost:1506/articalone/) and follow step 12, click edit URL and add.
  20. Copy IDAUTOM0.eot file from C:\WEFT\ and paste in your VS solution web folder.
  21. Open default.aspx page and update HTML code.
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>Untitled Page</title>
    <STYLE TYPE="text/css">
      @font-face {
        font-family:  IDAutomationHC39M;
        font-style:  normal;
        font-weight: normal;
        src: url(http://localhost:1506/articalone/IDAUTOM0.eot);
      }
    </STYLE>
    </head>
    <body>
    <form id="form1" runat="server">
     <span style="font-family:IDAutomationHC39M;" >!2546!</span><br />
    </form>
    </body>
    </html>
  22. Delete your selected font in your font directory (control panel->font->select font ->delete)
  23. Run your localhost test.htm page, and ASP.NET solution default.aspx page to check font embedding.
  24. Print your output and use barcode scanner to read barcode.

Points of Interest

By using this method, we don't need to install font on client side to view our application.

History

  • 28th June, 2011: Initial version
推荐.NET配套的通用数据层ORM框架:CYQ.Data 通用数据层框架
新浪微博粉丝精灵,刷粉丝、刷评论、刷转发、企业商家微博营销必备工具"