-
2021-08-05 01:29:40
字体大小通过下面这段代码设置:
font-size : 1em;
font-size 翻译为中文是“字体尺寸”,它的单位一般是px(像素)或em(字体高度)。
中国的许多网站的默认字体是12px,而且很多人使用的是IE浏览器,像IE6,用户是不能改变网页字体大小的,而现在主流的浏览器,只需要按住Ctrl后,滚动滑轮就可以放大缩小网页了。
单位em是一种相对的字体高度,一般的浏览器都默认为16px,需要注意的是,em会继承父元素的字体大小。
比如设置body字体大小为1em,p的字体大小为0.8em,那么换算为像素,p标签的实际单位是 1 * 0.8 * 16px = 12.8px。
不过,为了简化em和px的换算,一般设置body的font-size为62.5%,然后使用em设置其他标签的字体大小,这样,em换算为px只需要乘以10就行了,比如1em = 1 * 62.5% * 16px = 10 px
很多人都推荐使用em作为网页字体单位,有2点好处,不过我的实践告诉我,似乎并不太重要。
(1)当对IE6设置了字体更大或更小后,所有字体都可以按照比例放大缩小。不过,使用IE6的人越来越少了,现在主流的浏览器,按住Ctrl,滑动滑轮,就可以放大缩小了。
(2) 通过修改body的大小,就能按比例修改所有字体大小,因为body是其他字体的基准。这个一般是先设置body大小,然后设置其他标签大小,此时,若是修改了body的大小,其他标签的大小就会跟着变了。
更多相关内容 -
CSS中的字体大小设置属性总结
2020-09-24 22:03:15里我们整理了px、em以及CSS3中的rem三大文字大小设置方式,尤其是rem的相关知识,下面就一起来看一下CSS中的字体大小设置属性总结,需要的朋友可以参考下 -
CSS根据用户需求设置网页字体大小
2020-12-12 10:08:59在进行CSS页页布局时,页面的外观很重要,但也需要考虑字体与文字大小的问题,在jb51.net中也有过相关的介绍。如果发现设计人员十分关注字体及字体大小,我并不感到惊奇。使用CSS来编辑字体有各种各样的方法,每位... -
css样式中怎么设置字体大小
2021-08-05 04:39:18在css样式中,可以利用“font-size”属性来设置字体大小,只需给文本元素设置“font-size:值;”样式即可。font-size属性用于设置字体大小,实际上设置的是字体中字符框的高度,其实际字符字形可能比框高或矮(通常会...在css样式中,可以利用“font-size”属性来设置字体大小,只需给文本元素设置“font-size:值;”样式即可。font-size属性用于设置字体大小,实际上设置的是字体中字符框的高度,其实际字符字形可能比框高或矮(通常会矮)。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
css样式中,可以通过设置“font-size”属性来设置字体的大小。
通过 font-size属性可以设置元素中所包含文本的字体大小。如果一个元素没有显式定义font-size属性,则会自动继承父元素的 font-size属性的计算结果。
实际上font-size属性设置的是字体中字符框的高度;实际的字符字形可能比这些框高或矮(通常会矮)。
定义 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 种字体大小,都使用绝对单位。使用绝对长度单位后,在固定分辨率的显示器下,显示出来的都是固定大小。运行结果如下图所示:
如果以 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视频教程)
-
div字体大小设置 css设置div中字体大小尺寸样式
2021-08-05 02:28:02css设置div中字体大小尺寸样式设置篇在css div布局中常常对div字体大小设置,这篇ThinkCSS为大家介绍div中字体大小尺寸样式设置,通过直接在div标签加字体大小属性样式和对div加class设置外部CSS字体大小样式,让...div字体大小设置 css设置div中字体大小尺寸样式设置篇
在css div布局中常常对div字体大小设置,这篇ThinkCSS为大家介绍div中字体大小尺寸样式设置,通过直接在div标签加字体大小属性样式和对div加class设置外部CSS字体大小样式,让大家掌握div内字体大小样式设置。
一、div字体尺寸大小使用什么CSS单词?- 字体大小设置CSS单词
无论哪种方式对字体大小设置,都要用到字体尺寸大小样式单词为font-size。
二、两种div里字体大小实例
这里为大家介绍两种对div字体大小样式设置,通过小实例让大家掌握div内字体尺寸大小布局实现。
1、div字体大小布局实例说明
一种直接对div标签内使用style设置font-size字体大小属性来实现(通俗称为div标签内直接设置字体大小样式);另外一种对div使用class设置外部CSS font-size来实现字体大小(通俗称为外部样式实现字体大小布局)。这里是对DIV使用class类方式实现字体大小设置,当然也可以使用id来实现文字大小,只是一般小局部小实例使用class比较好。
2、div的文字大小实例代码
div文字大小实例 在线演示 ThinkCSS.example{font-size:18px}
/* 设置一个命名为example类(使用class=example)字体大小为18px */
我在div内,直接div加style设置字体大小为22px我在div内,使用外部样式设置字体大小为18px这里是两种对div内文字实现字体大小样式设置CSS+HTML代码。
3、字体大小实例截图
div字体大小CSS样式布局实例,div设置字体大小截图
4、在线演示与打包下载
div内文字的字体大小设置实例在线演示
div内文字的字体大小设置实例打包下载
三、div里字体大小样式设置小结
无论对什么对象或标签设置CSS字体大小,均使用font-size样式实现布局,根据需求选择标签内直接使用字体大小font-size样式,或使用外部CSS实现DIV中字体大小。
-
html css怎么设置字体大小
2021-06-27 01:08:16html css设置字体大小的方法:首先新建一个html页面;然后在这个html页面上创建一个标签并添加一个class类;最后使用font-size设置class类字体大小即可。本文操作环境:windows7系统、HTML5&&CSS3版、Dell ...html css设置字体大小的方法:首先新建一个html页面;然后在这个html页面上创建一个
标签并添加一个class类;最后使用font-size设置class类字体大小即可。本文操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。
打开html开发软件,新建一个html页面,然后在这个html页面上创建一个
标签并添加一个class类(title),然后给这个标签添加需要设置字体大小的文字。创建一个
css代码:
.title{
font-size: 50px;
}
div{text-align: center;}
保存html代码页面后,使用浏览器打开,即可看到设置了字体大小的效果。
【推荐学习:css视频教程】
-
css如何设置div字体大小
2021-08-05 02:28:05css设置div字体大小的方法是,给div字体添加font-size属性,并且设置合适的字体大小即可,例如【div {font-size:200%;}】。本文操作环境:windows10系统、css 3、thinkpad t480电脑。要设置div字体的大小,可以使用... -
字体大小大于CSS中设置的大小
2021-08-04 06:58:28当我将字体大小设置为特定像素高度时,计算出的字体大小是我在CSS中设置的大小的1.333倍。但是,如果我将字体大小设置为百分比,则使用正确的大小。这种情况发生在我尝试的每个浏览器中,包括Firefox 3.6.28,Fire... -
css 字体设置(不同浏览器设置效果)
2021-01-19 18:42:41乍一听css字体设置很容易,其实真做起来不然。我们工程师使用原力,他们在不同浏览器调整字体的大小知道的得到合适的结果。实际上有一点深入的理解就能起到很大的作用。 font-size 属性: font-size属性可以被设置给... -
详解CSS3 rem(设置字体大小) 教程
2020-09-24 19:36:19本篇文章主要介绍了详解CSS3 rem(设置字体大小) 教程,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 -
css设置字体大小的属性名是什么
2021-08-04 06:45:09css设置字体大小的属性名是“font-size”,该属性使用css中表示尺寸的单位(px、em、rem等)设置字体大小,也可以使用百分号等单位来设置。实际上font-size设置的是字体中字符框的高度;实际的字符字形可能比这些框高... -
css 中字体大小
2021-08-04 05:08:02css属性font-size可以用来设置字体的大小, 可是有时候看到大小的设置是font:bold 20px/24px Verdana, Geneva, sans-serif;这里的20px/24px是指的什么, 这个斜杠表示什么呢?解答:font有多个属性,我写的时候一般就用... -
css怎么设置字体大小
2021-07-02 01:32:56在CSS中,可以使用font-size属性来调整字体大小;font-size属性用于设置字体大小。如果一个元素没有显式定义font-size属性,则会自动继承父元素的 font-size属性的计算结果。语法:font-size : va... -
css设置中文字体
2021-06-12 03:14:56div css布局中css中文字体设置_css设置中文字体与兼容在HTML网页布局中,会用到中文字,而中文字有很多中文字体,有的开发者在自己电脑中下载并安装很多漂亮字体。而这些中文字体CSS设置建议?1、不能随意CSS设置... -
CSS 字体大小
2021-08-04 05:32:11CSS字体大小CSS中的font-size属性用于指定字体的高度和大小。它影响元素文本的大小。它的默认值为medium,可以应用于每个元素。此属性的值包括xx-small,small,x-small等。句法字体大小可以是相对的或绝对的。绝对... -
CSS设置字体大小、字体粗细、字体风格
2021-04-15 15:47:21font-size:设置字体大小: 该属性值的单位可以使用相对单位和绝对单位,推荐使用相对定位中的px。(浏览器能够识别的最小像素是12px) p{ font-size:20px; } 常见尺寸单位: font-family:设置字体: 如果需要设置多个... -
css教程之css设置字体颜色
2020-09-25 04:40:28本文主要介绍了css设置字体颜色、css设置字体大小、css设置字体样式等字体属性使用方法,大家参考使用吧 -
CSS字体大小设置时的参考(转)
2021-08-04 08:02:38font-size 设置的绝对关键字:以下几个绝对字体大小的设置是有效的。当然他们是浏览器预定义设置的。给元素指定了绝对关键字font-size的时候,该元素就不会继承父元素的字体大小font-size: xx-small;font-size: x-... -
css如何设置字体大小和颜色?
2021-06-09 04:41:21设计网页时,一般设置body的字体,让其他标签继承body的...设置字体的大小在CSS中,字体大小可以使用font-size属性来设置。font-size 翻译为中文是“字体尺寸”,它的单位一般是px(像素)或em(字体高度)。示例:font-... -
css样式字体设置宋体 css中font字体颜色怎么设置
2021-06-19 04:16:05需要更改字体和居中显示css字体样式有哪些非常多,可以设置系统中的任何一种字体样式,Windows自带中文字体:宋体、黑体、楷体(GB2312)、仿宋(GB2312)、微软雅黑等。 Windows自带英文字体:Arial、Verdana、 Geneva... -
如何设置css中字体大小?
2021-06-08 18:03:30如何设置css中字体大小?下面本篇文章就来给大家介绍一下使用CSS设置字体大小的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。在CSS代码中,可以通过设置“font-size”属性来设置字体的... -
关于CSS中字体设置的相关说明
2020-12-13 16:55:04一个em等于当前的字体大小,例如,如果文档的字体大小是12 pt,1 em等于12 pt。Ems在本质上是可伸缩的,所以2 em相当于24 pt,.5 em相当于6 pt等。ems由于其可伸缩性和适应移动设备的特性在web文档中 -
CSS布局中设置字体文字大小值大于行高值.docx
2021-11-22 16:15:39CSS布局中设置字体文字大小值大于行高值.docx -
css 设置最小字体
2021-09-02 21:23:29用transform:scale <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">...meta name="viewport" content="width=device-width, initial-scale=1.0">