下面是我总结的css中关于字体尺寸的知识,欢迎高手拍砖!

前端开发过程中,我们经常会遇到设置某个div固定显示几行文本;这时我们需要精确计算每个字号字体的宽度和高度。

下面是w3school中描述的尺寸的单位:

单位 描述
% 百分比
in 英寸
cm 厘米
mm 毫米
em

1em 等于当前的字体尺寸。

2em 等于当前字体尺寸的两倍。

例如,如果某元素以 12pt 显示,那么 2em 是24pt。

在 CSS 中,em 是非常有用的单位,因为它可以自动适应用户所使用的字体。

ex 一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。)
pt 磅 (1 pt 等于 1/72 英寸)
pc 12 点活字 (1 pc 等于 12 点)
px 像素 (计算机屏幕上的一个点)

我做了一个工具,用来展示字体高度和宽度对照表:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>测试字体宽度和高度</title>
<script src="http://code.jquery.com/jquery.min.js"></script> <!--这个永远是最新版本的CDN-->
<style>
body,html{
height: 100%;
font-size:100%;
}
div{bordor 1px green dotted;}
div,p,h1,h2{
margin:0;
padding:0;
}
h1,h2{
text-align:center;
margin:3px 0;
}
div.content{
width:90%;
margin:auto;
border:yellow 1px solid;
overflow:auto;
padding:10px;
text-align:center;
}
div#font{
border:1px red dotted;
height:230px;
overflow:auto;
}
div#font p{
border:1px green dotted;
}
.hidden{
display:none;
}
div.fontlist{
border:1px red dotted;
height:400px;
overflow:auto;
}
table.result{
border-left:1px solid blue;
border-bottom:1px solid blue;
width:50%;
margin:auto;
}
table.result th,table.result td{
border-right:1px solid blue;
border-top:1px solid blue;
padding:5px;
}
.fl{
float:left;
}
.fr{
float:right;
}
.clearboth{
clear:both;
}
.hidden{
display:none;
}
div.Top_Error{
position:fixed;
bottom:0;
left:0;
z-index:99;
width:50%;
overflow:auto;
color:red;
background-color:white;
border:1px green solid;
}
.red{
color:red;
}
</style>
</head>
<body>
<h1>测试字体宽度和高度</h1>
<div class="content">
<input type="button" class="test" value="获取字体高度"/>
<h2>字体</h2>
<div id="font">
</div>
<h2>结果</h2>
<div class="fontlist">
<table cellspacing="0" class="result">
<caption>结果</caption>
<thead>
<tr>
<th>字体大小</th>
<th>字体高度</th>
<th>字体宽度</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<script>
//初始化
$(function(){
initPage();
})
function initPage(){
var $font = $('div#font');
setFontSize('px',10,30);
setFontSize('em',1,10,'red');
//滚动条置顶
$font.scrollTop(0);
}
//点击按钮[测试字体宽度和高度]
$('input[type=button].test').click(function(){
var $tbody = $('table.result tbody'); $tbody.empty();
var sbody="";
sbody +=getFontSize();
$tbody.append(sbody);
//滚动条置顶
$tbody.scrollTop(0);
})
//获取字体高度-宽度
function setFontSize(sunit,b,e,classname){
var $font=$('<div></div>'); if(classname==undefined){
classname="";
}
else
{
classname=" "+classname;
}
for(var i=b;i<=e;i++){
var p = $('<div class="font fl'+ classname +'"></div>');
p.css('fontSize',i + sunit);
p.text('字');
p.attr('title','字体大小'+i + sunit)
$font.append(p);
}
$('div#font').append($font);
$('div#font').append('<div class="clearboth"></div>');
}
//获取字体高度-宽度
function getFontSize(){
var sbody="";
var classname=""; $('div#font .font').each(function(i,val){
var p = $(val);
var title=p.attr('title').replace('字体大小',''); if(title.indexOf('em')>-1){
classname="red";
}
sbody +="<tr class='"+ classname +"'>";
sbody +="<td>"+ title + "</td>";
sbody +="<td>"+ p.height() +"</td>";
sbody +="<td>"+ p.width() +"</td>";
sbody +="</tr>";
console.log(title);
});
return sbody;
}
//获取当前日期
var DateFormat = function (date,itype) {
if (!(date instanceof Date)) {
date = date.replace(/-/g, "/");
date = new Date(date);
}
var month = date.getMonth() + 1;
var year = date.getFullYear();
var day = date.getDate();
var Hour = date.getHours();
var second = date.getSeconds();
var minute = date.getMinutes();
var NewDate=""; if (month < 10) {
month = "0" + month;
}
if (day < 10) {
day = "0" + day;
}
NewDate = year + "-" + month + "-" + day;
if(itype == 2){
NewDate +=":" + Hour +":" + second +":" + minute;
}
return NewDate;
}
//组织错误提示窗口
function setError(sError){
var div = $('div.Top_Error');
if(div.length == 0){
div='<div class="Top_Error"><div class="fr"><button onclick="hiddenerr()" class="hiddenerr">关闭</button></div><div class="ErrContent"><ul></ul></div></div>';
$('body').append(div);
}
div = $('div.Top_Error ul');
var p = '<p>' + DateFormat(Date(),2) + '</p>';
p += '<p>' + sError + '</p>';
div.append('<li>' + p + '</li>')
console.log($('.Top_Error .toggle'));
}
//全局错误捕获
window.onerror = function (sMsg, sUrl, sLine) {
var sContent = "<p>信息:" + sMsg + "</p>" + "<p>网页:" + sUrl + "</p>" + "<p>行:" + sLine + "</p>";
//alert(sContent);
setError(sContent);
return true;
}
</script>
</body>
</html>

示例代码

下面是运行截图:

可以参照博文:

http://www.cnblogs.com/leejersey/p/3662612.html

CSS中字体尺寸总结的更多相关文章

  1. 有关CSS中字体响应式的设置

    在进行页面响应式设计中,往往需要根据屏幕分辨率来显示不同大小的字体.通常的做法是通过media queries给不同的分辨率指定不同的字体样式,例如: body { font-size: 22px; ...

  2. CSS中字体响应式的设置

    在进行页面响应式设计中,往往需要根据屏幕分辨率来显示不同大小的字体.通常的做法是通过media queries给不同的分辨率指定不同的字体样式,例如: body { font-size: 22px; ...

  3. css中字体常用单位px、em、rem和%的区别及用法总结

    一.px.em.rem和%的定义 1.px(像素) px单位的名称为像素,它是一个固定大小的单元,像素的计算是针对(电脑/手机)屏幕的,一个像素(1px)就是(电脑/手机)屏幕上的一个点,即屏幕分辨率 ...

  4. CSS中的尺寸单位

    绝对单位 px: Pixel 像素 pt: Points 磅 pc: Picas 派卡 in: Inches 英寸 mm: Millimeter 毫米 cm: Centimeter 厘米 q: Qua ...

  5. [css 实践篇]CSS中的尺寸单位

    绝对单位 px: Pixel 像素 pt: Points 磅 pc: Picas 派卡 in: Inches 英寸 mm: Millimeter 毫米 cm: Centimeter 厘米 q: Qua ...

  6. css中字体大小在不同浏览器兼容性问题

    css中使用font-size设定字体大小,不同浏览器的字体height一样,但是width不同,比如在火狐和谷歌中,font-size:20px,字体的高度变为20px,但是谷歌的字体宽度比火狐长 ...

  7. 认识CSS中字体图标

    前端之HTML,CSS(十一) 字体图标 使用文字做出小图标的效果并超越了小图标应用精灵图,使得图标变得灵活,减少了请求次数,优化了界面的性能.字体图标本身为矢量图. 字体图标的使用过程 1.UI设计 ...

  8. css中字体单位px,pt,em,百分比之间的区别和用法

    px 即像素,一般国内网站使用较多,默认大小是16px; pt 印刷行业常用单位 em  相对单位,相对父元素属性的单位 ,一般用于移动端布局 rem  结合相对定位和绝对定位的优势,相对根元素htm ...

  9. css 中字体大小

    css属性font-size可以用来设置字体的大小, 可是有时候看到大小的设置是font:bold 20px/24px Verdana, Geneva, sans-serif; 这里的20px/24p ...

随机推荐

  1. Google数据中心B4网络具体实现

    ① 背景介绍 Google的网络有两种,一种是数据中心内部网络,另外一种是WAN网,其中WAN网又分为两种:一是数据中心之间的互联网络,属于内部网络(G-Scale Network),另外一种是面向I ...

  2. 第28章 行为型模式大PK

    27.1 策略模式 VS 命令模式 27.1.1 策略模式实现压缩算法 //行为型模式大PK——策略模式和命令模式 //实例:用策略模式实现压缩算法 #include <iostream> ...

  3. Sphinx中文分词安装配置及API调用

    这几天项目中需要重新做一个关于商品的全文搜索功能,于是想到了用Sphinx,因为需要中文分词,所以选择了Sphinx for chinese,当然你也可以选择coreseek,建议这两个中选择一个,暂 ...

  4. POJ 2553 The Bottom of a Graph TarJan算法题解

    本题分两步: 1 使用Tarjan算法求全部最大子强连通图.而且标志出来 2 然后遍历这些节点看是否有出射的边,没有的顶点所在的子强连通图的全部点,都是解集. Tarjan算法就是模板算法了. 这里使 ...

  5. Tcl在Vivado中的使用

    http://blog.chinaaet.com/detail/36014 Vivado是Xilinx最新的FPGA设计工具,支持7系列以后的FPGA及Zynq 7000的开发.与之前的ISE设计套件 ...

  6. OC - 31.通过封装的自定义布局快速实现商品展示

    概述 实现效果 设计思路 采用MVC架构,即模型—视图-控制器架构 使用MJExtension框架实现字典转模型 使用MJRefresh框架实现上拉和下拉刷新 上拉刷新,加载新的数据 下拉刷新,加载更 ...

  7. idea git 注意事项

    1.使用idea进行不同分支切换的时候,一定要先将代码当前分支的代码提交(可以不push),否则当前分支未提交的代码被认为即将切换的代码,在切换过程中会产生冲突. 2.使用idea进行merge的时候 ...

  8. Linux变量键盘读取、数组与声明: read, array, declare

    [root@www ~]# read [-pt] variable 选项与参数: -p :后面可以接提示字符! -t :后面可以接等待的『秒数!』这个比较有趣-不会一直等待使用者啦! 范例一:让用户由 ...

  9. rpm命令参数(转载)

    rpm 执行安装包 二进制包(Binary)以及源代码包(Source)两种.二进制包可以直接安装在计算机中,而源代码包将会由RPM自动编译.安装.源代码包经常以src.rpm作为后缀名. 还不清楚具 ...

  10. Cracking The Coding Interview 1.1

    //原文: // // Implement an algorithm to determine if a string has all unique characters. What if you c ...