html怎么设置网页的大小怎么设置,css怎么设置字体大小
前端开发中,为了突出一些内容常常对一些内容进行字体大小的设置。那么怎么设置字体大小?下面本篇文章就来给大家介绍一下使用CSS设置字体大小的方法,希望对大家有所帮助。
在CSS中,可以使用font-size属性来调整字体大小;font-size属性用于设置字体大小。如果一个元素没有显式定义font-size属性,则会自动继承父元素的 font-size属性的计算结果。
语法:font-size : value ;
注意,实际上它设置的是字体中字符框的高度;实际的字符字形可能比这些框高或矮(通常会矮)。
属性值:
定义 font-size 时,可以使用预定义关键字、绝对尺寸、相对尺寸:
1)预定义关键字
预定义关键字有 xx-small、x-small、small、medium、large、x-large、xx-large,尺寸按顺序依次增大,类似于衣服的尺寸。
使用预定义关键字有两大缺陷:一是只有 7 种选择,可选择范围太小;二是跟衣服的尺寸一样,不同厂商对每个关键字对应的字体大小的精确值可能各不不同,导致在不同浏览器下,文本的大小可能不同。因此,不推荐使用预定义关键字来定义字体的大小。
2)绝对尺寸
绝对尺寸有px(像素)、pt(点,1pt 相当于 1/72in)、in(英寸)、cm(厘米)、mm(毫米)等。如:px {
font-size: 14px;
}
.pt {
font-size: 10pt;
}
.in {
font-size: .15in;
}
.cm {
font-size: .4cm;
}
.mm {
font-size: 4mm;
}
字体大小: 14px
字体大小: 10pt
字体大小: .15in
字体大小: .4cm
字体大小: 4mm
上述代码定义了 5 种字体大小,都使用绝对单位。使用绝对长度单位后,在固定分辨率的显示器下,显示出来的都是固定大小。运行结果如图 3‑1 所示:
如果以 px 为单位设置字体大小,使用IE浏览器的用户,就不能在浏览器上通过设置“文字大小”来对文本进行放大或缩小。如果文本太小,就会影响阅读,使用户体验大打折扣。
3)相对尺寸
相对尺寸有 em、%、rem,它们都是相对于某个参考基准的字体大小,来计算当前字体的大小,只是参考基准不同而已。
em 的参考基准是父元素。那么,如何计算要指定的 em 值呢?实际上,1em 总是等于父元素 font-size属性的值,这就是 em 的工作原理。据此,可以通过以下公式来确定百分比的值:
目标元素的字体大小 / 父元素的字体大小 = 值
因此,在使用 em 定义字体大小时,最好在 html 或 body 元素上建立一个基准。假设在 body 中设置的基准大小为 12px:body {font-size: 12px;}
如果希望 body 中所有段落的字体大小为 18px,根据上述公式:
18 / 12 = 1. 5
因此,只需将将段落的 font-size 设置为 1.5em 就可以了,这条规则就表示段落文本的字体大小为父元素文本大小的1.5 倍:body p {font-size: 1.5em;}
% 的参考基准也是父元素,100% 也总是等于父元素 font-size属性的值,即 1em 就等于 100%。也就是说,在用 % 定义字体大小时,只需将 em 的值换算成相应的百分数即可。因此,以下两条声明会得到相同的结果(假设两个段落具有相同的父元素):p.one {
font-size: 1.5em;
}
p.one {
font-size: 150%;
}
需要注意的是,尽管 font-size 是可以继承的,但在使用 % 和 em 定义字体大小时,子元素继承的是计算结果的值,而不是 % 和 em 的数字。并且,% 和 em 还可以累积。考虑以下代码:p {
font-size: 12px;
}
em {
font-size: 200%;
}
strong {
font-size: 200%;
}
12px 200% 200%
上述代码中,p 为父元素,em 为 p 的子元素,strong 为 em 的子元素。em 元素的基准是 p 元素,而 strong 元素的基准是 em 元素。计算结果如下:em:12 × 200% = 24px
strong:24 × 200% = 48px
得到的运行结果如图所示:
在这种多层嵌套的情况下,如果某一个计算结果不是整数,浏览器可能就会取整,子元素再继承取整后的值。如果嵌套很深,下层的字体大小就越来越偏离实际计算值。并且,由于参考基准总是随着元素发生变化,嵌套越深,计算起来也就越困难。
鉴于此,CSS3中新增的一个相对单位 rem(root em的简称),它总是以文档的根元素(即 html 元素)为参考基准,来设置其它元素的字体大小,即 1rem 相当于 html 元素 font-size属性的值。考虑以下代码:html {
font-size: 10px;
}
p {
font-size: 1.4rem;
}
上述声明中,p 元素的字体大小将是 html 字体大小的1.4倍,则计算得到 p 元素的字体大小就是1.4 × 10px = 14px。
这样一来,无论嵌套多少层,参考基准始终不变,计算字体大小就变得容易多了。不过,需要注意的是,rem 是CSS3新增的一个相对单位,IE9 以下版本的老浏览器却不支持它,这也是很多编程人员尚未使用 rem 的原因。
在定义字体大小时,笔者建议在 html 元素中定义绝大多数元素所需要的字体大小,并让所有子元素继承 html 的字体大小。如果某个子元素需要要改变字体大小,则使用相对尺寸 em 或 % 或 rem 重新定义。
这样做的好处是,一方面,绝大多数元素都不必定义字体大小,减少不必要的定义;另一方面,如果完成所有的文字排版后,又要统一调整页面文字大小,就可以只修改 html 中的字体大小,其它所有文字的字体大小会自动变化,修改起来就很容易。
说明:
在某些特殊场景下,需要把 font-size 的值设置为0,来隐藏某些文本。但是,在IE6和IE7中,font-size: 0 的文本却变成了小黑点,并没有完全隐藏。
解决这个问题的最简单办法,就是在 font-size: 0 的同时,把 text-indent 属性设置为一个很大的负值,让这些文本显示在屏幕之外,自然就被隐藏起来。
浏览器支持
更多CSS相关知识,可访问 CSS教程 !!
html怎么设置网页的大小怎么设置,css怎么设置字体大小相关推荐
- HTML如何设置字号大小和颜色,css如何设置字体大小和颜色?
设计网页时,一般设置body的字体,让其他标签继承body的字体,这样设置特别方便,但是标题标签h1到h6和表单标签(input类型)是没有继承body的字体属性的,它们的字体需要单独设置. css如 ...
- 设置网页的html的font-size,CSS中的font-size属性使用教程
基本语法结构: Font-size+字体大小数值+单位 单词:font-size 语法:font-size : absolute-size | relative-size | length 取值:xx ...
- html如何固定字号,css怎么控制字体大小?
css怎么控制字体大小?下面本篇文章就来给大家介绍一下在HTML页面中使用CSS控制字体大小的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css怎么控制字体大小? 在CSS ...
- c语言cad改变字体大小,传授win7系统AUTOCAD2007调整字体大小的恢复方法
然而并是不所有的朋友都会解决win7系统AUTOCAD2007调整字体大小的问题,然后就向小编打探win7系统AUTOCAD2007调整字体大小的解决方法,于是小编就个大家整理的win7系统AUTOC ...
- html字体修改微软字体大小,css设置字体(css怎么调整字体大小)
一般字体的设置包含:字体,字体大小,字体颜色 html设置字体的话有很多标签去设置1. h1,h2,h3,h4,h5,h6 标题 其中 定义最大的标题. 定义最小的标题.2. 采用. 用Css设置整个 ...
- android 布局 字体大小,移动端页面布局及字体大小该如何设置
之前发过一篇文章<移动端应该如何动态设置字体大小?>,主要说了移动web端布局的一些解决方法,本文再一次把这个问题提出来,并分别对安卓和IOS设备的屏幕了解做出自己的分享,在进入正文之前最 ...
- Matlab中设置横纵轴、图例以及更改横纵轴字体大小
在论文中插图,有时候要缩的很小,导致看不清楚,所以需要将图像的字体变大,下面给出matlab的具体代码操作. 当然在matlab中也可以通过图形属性直接更改图像的属性,问题是这样修改效率很低,而且下次 ...
- 苹果android在哪里设置字体大小,iPhone11字体大小怎么调?苹果手机调节字体大小的三种方法...
现在智能手机几乎是人手一部,就连我们身边的很多老年人也用上了智能手机.由于年龄的关系,老年人的视力一般都不太好.以苹果手机为例,如果用标准字体大小,老年人看上去就会很吃力.在这里介绍下如何在苹果手机上 ...
- win7设置系统字体大小,加粗,TXT字体大小加粗
设置系统字体大小 1.桌面空白处右击,点击 屏幕分辨率: 2.看图操作,点击红框 3.看图操作,点击红框 4.看图操作,点击红框 设置系统字体加粗 1.桌面空白处右击,点击 个性化: 2.看图操作,点 ...
- idea设置字体大小(换主题后的字体大小设置)
如果你是默认主题 直接这样设置字体大小 如果你换了自定义主题 如果你换了自定义主题,那么上面的设置方法会没有作用,我们需要像下面这样设置:
最新文章
- Win10 ancona傻瓜安装tensorflow-gpu,ancona傻瓜安装pytorch-gpu
- Hadoop学习之路一 Single Node Setup
- 设置ios6中UIViewController旋转
- RecycleView的正确打开方式
- 爬虫小记:利用cookies跳过登陆验证码
- IE6,IE7下按钮(BUTTON)变宽
- 论文|Airbnb Embedding的实践和思考
- Linux下类FreeBSD uprintf实现
- 阿里通信携手联通MWC演示“智选加速” 预演5G垂直应用
- C++ 判断某个年份的生肖
- 小布语音下载安装_小布语音助手
- php strpos注意问题坑,strpos函数的坑
- java是高级还是低级语言_程序员:高级与低级编程语言,您应该学习哪些内容?...
- 和Leo一起做爱线段树的好孩子HDU5238 Calculator
- 数值优化理论的数学基础
- office 2013 已停止工作;word excel 打开任何文件
- 为什么建议大家使用 Linux 开发?有那么爽吗?
- Jodconverter-最新无码爽具,你值得拥有!
- 科技筑梦创新成长 “探知未来”一直在路上
- WPF实现简单的9宫格键盘移动方块
热门文章
- Richer Convolutional Features for Edge Detection(RCF-PYTorch)部署
- 小米电视屏蔽开机广告的方法
- 爬虫,爬取猫眼电影Top100的电影名与评分
- 后期维特根斯坦的语境观“:语言游戏”与“生活形式”
- 洛夏墨迹测验(Rorschach Inkblot Test)
- 计算机网络:学习笔记(持续更新)
- indiegogo众筹
- Android11更新包,Android11系统
- wifidog源码分析 - 初始化阶段
- 解决外边距坍塌的几种方法