POS печать шрифта по умолчанию

Question

Здравствуйте, у меня есть матричная печать EPSON TM-220PD, как я могу использовать шрифт по умолчанию в веб-печати. Я использую POS woocommerce, стиль шрифта, который печатается в квитанции, является тем, который я объявил в его шаблоне.

     <style>
    /* Reset */
    * {
      background: transparent !important;
      color: #000 !important;
      box-shadow: none !important;
      text-shadow: none !important;
      width:90%;
      align:center;
    }
    body, table {
    font-family: 'monospace', monospace;
    text-transform: uppercase;
      line-height: 1.2;
      font-size: 10px;
      width:100%;
    }
    h1,h2,h3,h4,h5,h6 {
        text-align:center;
      margin: 0;
    }
    table {
      border-collapse: collapse;
      border-spacing: 0;
    }

    .footer-notes {
        font-size:9px;
        text-align:center;
        White-space:nowrap;
        width:100%;
    }
    .orderdiv{
        width:120%;
    }
   .order-header {
        white-space:nowrap;
    }
    .contact-info {
        text-align:center;
        font-size:11px;
    }
    /* Spacing */
    .order-branding, .order-addresses, .order-info, .order-items, .order-notes, .order-thanks {
      margin-bottom: 10px;
    }

    /* Branding */
    .order-branding h1 {
      font-size: 2em;
      font-weight: bold;
    }

    /* Addresses */
    .order-addresses {
      display: table;
      width: 100%;
    }
    .billing-address, .shipping-address {
      display: table-cell;
      width: 100%;
    }

    /* Order */
    table {
      width: 100%;
    }

    table th, table td {
        align:center
    }
    table.order-info {
        white-space:nowrap;
        font-size:9px;
      border-top: 1px dashed #000;
    }
    table.order-info th {
      text-align: left;
      width: 100%;
    }

    table.order-items {
      border-bottom: 1px dashed #000;
    }
    table.order-items thead tr {
      border-bottom: 1px dashed #000;
      width:100%;
    }

    .order-info {
        margin-top: 10px;
    }
    .product {
      text-align: left;
    }
    .product dl {
      margin: 0;
    }
    .product dt {
      font-weight: 100;
      padding-right: 6px;
      float: left;
      clear: left;
    }
    .product dd {
      float: left;
      margin: 0;
    }
    .price {
      text-align: right;
    }
    .qty {
      text-align: center;
    }
    .order-notes {
        text-align: left;
        font-size: 13px;
        word-wrap: break-word;
        width:100%;
    }
    table td.product {
         display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width:90%;
    }
    table td.variable {
     white-space: nowrap;
    max-width:90%;
    }
    table td.price {
          white-space: nowrap;
    overflow: hidden;
    }

    tfoot {
      text-align: right;
    }
    tfoot th {
      width: 70%;
    }
    tfoot tr.subtotal {
        Display:none;
    }
    tfoot tr.cart-discount {
        display:none;
    }
    tfoot tr.order-total {
      font-weight: bold;
    }

  </style>

я хочу использовать шрифт по умолчанию для моего POS, который fonta11, который не поддерживается в CSS. спасибо за ответы

Answer 1

Ну, вы должны сначала преобразовать этот шрифт в веб-шрифты

Например, через этот сайт или похожий на это:

https://transfonter.org/

И тогда у вас есть шрифты в форматах: eot woff otf svg

С кодом ниже, вы увидите этот шрифт в CSS

@ font-face {
font-family: "font11";
src: url ("css / fonts / fonta11.eot");
src:
url ("css / fonts / fonta11.woff") format ("woff"),
url ( "css / fonts / fonta11.otf") format ( "opentype"),
url ("css / fonts / fonta11.svg # filename") format ("svg");
}

А потом например

h1 {
font-family: 'fonta11', arial, sans-serif;
font-weight: normal;
font-style: normal;
}