css 我创建了一个价格标签的html页面,当我试图打印html页面在一个小尺寸的标签质量降低

w1jd8yoj  于 2023-05-08  发布在  其他
关注(0)|答案(1)|浏览(94)

我创建了一个价格标签的HTML页面,当我试图打印HTML页面在一个小规模的大小标签质量降低。Html页面是写在zoho创作者应用程序和片段和css是给吹。实际上,我需要打印大小为60x45大小的标签,我试图改变字体和大小,但这些都没有得到应用,而我们得到的打印输出。我的代码中有一些不熟悉的标签,因为这些代码是在zoho creator应用程序中编写的。

<html>
   <head>
      // 
      <link rel="preconnect" href="https://fonts.googleapis.com">
      // 
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      // 
      <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&display=swap" rel="stylesheet">
      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      <link href="https://fonts.googleapis.com/css2?family=Schibsted+Grotesk&display=swap" rel="stylesheet">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <style>
         .sec {
         padding-left: 15px;
         }
         .code {
         height: 65px;
         width: 360px;
         margin-left: 60px;
         padding-bottom: 50px;
         }
         p
         {
         //letter-spacing: .7px;
         margin : 0 ;
         padding:0;
         font-size:37px;
         font-family: Arial ;
         //font-family: helvetica;
         //font-family : Verdana ;
         //font-family: 'Schibsted Grotesk', sans-serif;
         font-weight: 600;
         // font-weight: bold;
         }
         .siz
         {
         font-size:50px;
         }
         .word{
         word-spacing: 30px;
         }
         .price
         {
         font-size:50px;
         }
         img{
         width: inherit;
         //height: inherit;
         height: 115px;
         }
         b{
         font-family: Arial ;
         //  font-family: 'Schibsted Grotesk', sans-serif;
         }
         @page {
         size : 1.77in 2.36in ;
         }   
      </style>
   </head>
   <body>
      <div class="sec">
         <b>
            <p style="padding-top: 10px; margin-top: -8px; letter-spacing: 2.5px; font-weight: 700;"> BRAND <b style="margin-left:55px; font-weight: 700; letter-spacing: 2.5px;">: ENGLISH COLOURS</b></p>
            <p style="letter-spacing: 2.5px; font-weight: 700;"> PRODUCT <b style="margin-left:12px; font-weight: 700; letter-spacing: 2.5px;">: <%=product.Product_Name%></b></p>
            <p style="letter-spacing: 2.5px; font-weight: 700;"> STYLE <b style="margin-left:70px; font-weight: 700; letter-spacing: 2.5px;">: <%=style.Style%> <%=variant.Variant%></b></p>
            <p style="letter-spacing: 2.5px; font-weight: 700;"> SIZE <b style="margin-left:95px; font-weight: 700; letter-spacing: 2.5px;">:</b><b style="margin-left:0px;" class="siz"> <%=productSize.Size%></b></p>
            <p style="letter-spacing: 2.5px; font-weight: 700;"> NET QTY <b style="margin-left:29px; font-weight: 700; letter-spacing: 2.5px;">: <%=product.Net_Quantity%> &nbsp; No.</b></p>
            <p class="price" style="letter-spacing: 2.5px; font-weight: 700;"> MRP  &nbsp;  &nbsp;<b style="margin-left:-12px; letter-spacing: 2.5px;">₹ <%=product.MRP%></b></p>
         </b>
         <P style="font-size:30px; LETTER-SPACING: 2px; font-weight:600"> (Inclusive of all Taxes)</P>
         <b>
            <P style="margin-top: -1px; word-spacing: 2.5px; letter-spacing: 2.5px; font-weight: 700;"> Manufactured & Packed by:</P>
            <P style="margin-top: -1px word-spacing: 2.5px; letter-spacing: 2.5px; font-weight: 700; "><%=manufacture.address_line_11%></P>
            <P style="margin-top: -1px; word-spacing: 1.5px; letter-spacing: 1.5px; font-weight: 700;"><%=manufacture.address_line_21%>-<%=manufacture.postal_Code1%></P>
            <P style="margin-top: -1px; word-spacing: 1.5px; letter-spacing: 1.5px; font-weight: 700;"> Under License From :</P>
            <P style="margin-top: -1px; word-spacing: 1.5px; letter-spacing: 1.5px; font-weight: 700;"> <%=license.address_line_12%></P>
            <P style="margin-top: -1px; word-spacing: 1.5px; letter-spacing: 1.5px; font-weight: 700;"> <%=license.address_line_22%> <%=license.postal_Code2%></P>
            <P style="margin-top: -1px; word-spacing: 1.5px; letter-spacing: 1.5px; font-weight: 700;"> In case of any complaints:</P>
            <P style="margin-top: -1px; word-spacing: 1.5px; letter-spacing: 1.5px; font-weight: 700;"> <%=email%></P>
            <P style="margin-top: -1px; word-spacing: 1.5px; letter-spacing: 3px; font-weight: 700;"><%=website%></P>
            <P style="margin-top: -1px; word-spacing: 1.5px; font-weight: 700;"> CODE &nbsp; : <%=product.Production_Code%></P>
            <div class="code">
               <img src=<%=URL%>>
            </div>
         </b>
      </div>
   </body>
</html>

打印输出如下所示,有关此打印问题的帮助

fivyi3re

fivyi3re1#

将此添加到CSS部分(<style>);

@media print{
  * {
  font-size: 2pt !important;
  margin:0!important;
  padding:0!important;
  }
  img{
  height: 1in;
  width: 1in;
  }
}

请根据需要调整属性值。也就是说,由于我没有图像的宽高比,我认为它是1:1。
希望你觉得这有用!

相关问题