整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
近有客户在linux系统部署皕杰报表后发现总有高度拉伸不到位的情况发生，可是我们自己却无论怎么测试都不能重现问题。不能重现问题，就不好找出解决问题的方法。
于是要来了这张问题表的html源代码，在浏览器中打开后用F12检查，发现这个单元格的拉伸高度计算不正确。见下图：
是什么原因导致的计算错误呢？我们分析有两种可能，一是所用的皕杰报表版本太老，二是计算高度的依据缺失，而计算拉伸高度的依据是字体和字号。
检查了客户使用的版本号没有问题，但在linux系统里却只安装了宋体，其它中文字体都没有，而在报表里选择的字体却是微软雅黑，计算的依据没了，系统所以计算出的拉伸高度就是错的了。让用户把报表里的字体改成宋体，再测试拉伸高度变大了一点，但是还是没有完全拉开，我们判断是jre里也没有宋体，理论上在jre里安装宋体后拉伸问题就会得到解决。
因而我们给了两个解决方案：一是在linux系统中和jre中安装所用的中文字体，方法按linux系统及安装jdk的基本要求，这里不做说明。二是改这个单元格的css，让单元格废弃计算的拉伸高度，改为自动拉伸。
在皕杰报表设计器全局属性web资源引用中添加：
<style type="text/css">
.expand div{
height: auto !important;
}
</style>在设计器这个单元格的属性css样式里添加expand。
用户觉得jre中安装中文字体比较麻烦，决定采用方法二测试。部署后我们看到单元格已经正常拉伸了，用F12检查一下运行的css，果然是废弃了计算的高度，而采用了我们新增的css格式。见图：
至此高度拉伸不到位问题得以解决。但我们认为最好的解决方案还是方法一，把要用的中文字体安装上，避免产生错误的计算结果。
SS3 @font-face 规则
以前CSS3的版本，网页设计师不得不使用用户计算机上已经安装的字体。
使用CSS3，网页设计师可以使用他/她喜欢的任何字体。
当你发现您要使用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户。
您所选择的字体在新的CSS3版本有关于@font-face规则描述。
您"自己的"的字体是在 CSS3 @font-face 规则中定义的。
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
| 属性 | |||||
|---|---|---|---|---|---|
| @font-face | 4.0 | 9.0 | 3.5 | 3.2 | 10.0 |
Internet Explorer 9+, Firefox, Chrome, Safari, 和 Opera 支持 WOFF (Web Open Font Format) 字体.
Firefox, Chrome, Safari, 和 Opera 支持 .ttf(True Type字体)和.otf(OpenType)字体字体类型）。
Chrome, Safari 和 Opera 也支持 SVG 字体/折叠.
Internet Explorer 同样支持 EOT (Embedded OpenType) 字体.
注意： Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。
使用您需要的字体
在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。
如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)：
实例
<style> @font-face{font-family:myFirstFont; src:url(sansation_light.woff);}div{font-family:myFirstFont;}</style>
使用粗体文本
您必须添加另一个包含粗体文字的@font-face规则：
实例
@font-face{font-family:myFirstFont; src:url(sansation_bold.woff); font-weight:bold;}
该文件"Sansation_Bold.ttf"是另一种字体文件，包含Sansation字体的粗体字。
浏览器使用这一文本的字体系列"myFirstFont"时应该呈现为粗体。
这样你就可以有许多相同的字体@font-face的规则。
CSS3 字体描述
下表列出了所有的字体描述和里面的@font-face规则定义：
提示：
URL请使用小写字母的字体，大写字母在IE中会产生意外的结果| 描述符 | 值 | 描述 |
|---|---|---|
| font-family | name | 必需。规定字体的名称。 |
| src | URL | 必需。定义字体文件的 URL。 |
| font-stretch | ||
| font-style | ||
| font-weight | ||
| unicode-range | unicode-range | 可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。 |
normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded
normal
italic
oblique
可选。定义字体的样式。默认是 "normal"。
normal
bold
100
200
300
400
500
600
700
800
900
可选。定义字体的粗细。默认是 "normal"。
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！
切图网客户项目中碰到一个问题，有一个数字需要倾斜，这个便用到了css3的 rotate的旋转的属性，没有用 skew倾斜，因为倾斜以后的文字是被拉伸变形了，但我并不像这样，下面是css3详细，另外要说明的是，这个数字做了 滚动到当前屏幕的时候，数字增长。
用到了jquery插件
<script type='text/javascript' src='js/jquery-waypoints-2.0.3.js'></script> <!--滚动视差-->
<script type="text/javascript" src="js/jquery.countTo.js"></script> <!--数字增长-->
共一个参数“角度”，单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，上述代码作用是顺时针旋转45度。
二.缩放 scale
用法：transform: scale(0.5) 或者 transform: scale(0.5, 2);
参数表示缩放倍数；
一个参数时：表示水平和垂直同时缩放该倍率
两个参数时：第一个参数指定水平方向的缩放倍率，第二个参数指定垂直方向的缩放倍率。
三.倾斜 skew
用法：transform: skew(30deg) 或者 transform: skew(30deg, 30deg);
参数表示倾斜角度，单位deg
一个参数时：表示水平方向的倾斜角度；
两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度。
四.移动 translate
用法：transform: translate(45px) 或者 transform: translate(45px, 150px);
参数表示移动距离，单位px，
一个参数时：表示水平方向的移动距离；
两个参数时：第一个参数表示水平方向的移动距离，第二个参数表示垂直方向的移动距离。
五.基准点 transform-origin
在使用transform方法进行文字或图像的变形时，是以元素的中心点为基准点进行的。使用transform-origin属性，可以改变变形的基准点。
用法：transform-origin: 10px 10px;
共两个参数，表示相对左上角原点的距离，单位px，第一个参数表示相对左上角原点水平方向的距离，第二个参数表示相对左上角原点垂直方向的距离；
两个参数除了可以设置为具体的像素值，其中第一个参数可以指定为left、center、right，第二个参数可以指定为top、center、bottom。
六.多方法组合变形
上面我们介绍了使用transform对元素进行旋转、缩放、倾斜、移动的方法，这里讲介绍综合使用这几个方法来对一个元素进行多重变形。
用法：transform: rotate(45deg) scale(0.5) skew(30deg, 30deg) translate(100px, 100px);
这四种变形方法顺序可以随意，但不同的顺序导致变形结果不同，原因是变形的顺序是从左到右依次进行，这个用法中的执行顺序为1.rotate 2.scalse 3.skew 4.translate
原文地址：http://www.qietu.cn/thread-15197-1-1.html （切图社区）
加微信公众号：qietuwang （限做前端的人）
*请认真填写需求信息，我们会在24小时内与您取得联系。
