Question

我试图设计一个4纵向打印尺寸的页面，我想将字体全高度设为图像; click to see my example image (from left - 39)

我的html结构

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>A4 CAM YAZI</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<page size="A4" layout="portrait">
      <div class="wrapper">
            <div class="fiyat_sol">
                <h1>39</h1>
            </div>
            <div class="icerik_sag">
                <img src="logo.png" />
            </div>
         </div><!--wrapper-->

        </page>
        </body>
        </html>

我的css代码

 @charset "utf-8";
/* CSS Document */
body {
  background: rgb(204,204,204); 
  font-family:Arial, Helvetica, sans-serif;
}
body,html{
     height: 100%;
     font-size:100%;
}
page {
  background: white;
  display: block;
  margin: 0 auto;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}

page[size="A4"][layout="portrait"] {
  width: 29.7cm;
  height: 21cm;  
}

@media print {
  body, page {
    margin: 0;
    box-shadow: 0;
  }

}
.fiyat_sol{
    float:left;
    width:14cm;
}
.fiyat_sol h1{
    width:14.6cm;
    height:100%;
    font-size:30em;
    margin-top:-97px;
}
.icerik_sag{
    float:right;
}

不需要跨浏览器我只打印它

Answer 1

.fiyat_sol h1{
    width:14.6cm;
    height:100%;
    font-size:30em;
    margin-top:-97px;
}

100％的高度只会扩展元素的大小，不会增加字体，我会将<h1>更改为：

.fiyat_sol h1{
  position: absolute;
  top: 0;
  left: 0;
  font-size: 21cm;
  margin: 0;
  padding: 0;
  transform: scaleX(.3);
  transform-origin: 0 0;
}

打印的全高字体？

1 个答案: