广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >CSS中怎么设置字体大小
  • 482
分享到

CSS中怎么设置字体大小

css 2022-10-19 05:10:45 482人浏览 泡泡鱼
摘要

这篇文章将为大家详细讲解有关CSS中怎么设置字体大小,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。PX为单位在WEB页面初期制作中,我们都是使用“px”来设

这篇文章将为大家详细讲解有关CSS中怎么设置字体大小,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

PX为单位
WEB页面初期制作中,我们都是使用“px”来设置我们的文本,因为他比较稳定和精确。但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,他改变了浏览器的字体大小,这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说,就是一个大问题了。因此,这时就提出了使用“em”来定义Web页面的字体。

em为单位
这种技术需要一个参考点,一般都是以\<body>的“font-size”为基准。比如说我们使用“1em”等于“10px”来改变默认值“1em=16px”,这样一来,我们设置字体大小相当于“14px”时,只需要将其值设置为“1.4em”。

CSS Code复制内容到剪贴板

  1. body {   

  2.       font-size: 62.5%;  

  3.   }   

  4.   h2 {   

  5.       font-size: 2.4em;   

  6.   }   

  7.   p   {   

  8.       font-size: 1.4em;   

  9.   }   

  10.   li {   

  11.       font-size: 1.4em;   

  12.   }  

为什么“li”的“1.4em”是不是“14px”将是一个问号呢?如果你了解过“em”后,你会觉得这个问题是多问的。前面也简单的介绍过一回,在使用“em”作单位时,一定需要知道其父元素的设置,因为“em”就是一个相对值,而且是一个相对于父元素的值,其真正的计算公式是:
1 &divide; 父元素的font-size &times; 需要转换的像素值 = em值
这样的情况下“1.4em”可以是“14px”,也可以是“20px”,或者说是“24px”,总之是一个不确定值,那么解决这样的问题,要么你知道其父元素的值,要么呢在任何子元素中都使用“1em”。这样一来可能又不是我们所需要的方法。

Rem为单位
css3的出现,他同时引进了一些新的单位,包括我们今天所说的rem。在W3C官网上是这样描述rem的&mdash;&mdash;“font size of the root element”。下面我们就一起来详细的了解rem。
前面说了“em”是相对于其父元素来设置字体大小的,这样就会存在一个问题,进行任何元素设置,都有可能需要知道他父元素的大小,在我们多次使用时,就会带来无法预知的错误风险。而rem是相对于根元素\<html>,这样就意味着,我们只需要在根元素确定一个参考值,,在根元素中设置多大的字体,这完全可以根据您自己的需要,大家也可以参考下图:
CSS中怎么设置字体大小

我们来看一个简单的代码实例:

CSS Code复制内容到剪贴板

  1. html {font-size: 62.5%;}   

  2.  body {font-size: 1.4rem;}   

  3.  h2 { font-size: 2.4rem;}  

我在根元素\<html>中定义了一个基本字体大小为62.5%(也就是10px。设置这个值主要方便计算,如果没有设置,将是以“16px”为基准
)。从上面的计算结果,我们使用“rem”就像使用“px”一样的方便,而且同时解决了“px”和“em”两者不同之处。
浏览器的兼容性
rem是CSS3新引进来的一个度量单位,大家心里肯定会觉得心灰意冷呀,担心浏览器的支持情况。其实大家不用害怕,你可能会惊讶,支持的浏览器还是蛮多的,比如:Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。只是可怜的IE6-8无法,你们就把他们当透明了吧,我向来都是如此。
不过使用单位设置字体,可不能完全不考虑IE了,如果你想使用这个REM,但也想兼容IE下的效果,可你可考虑“px”和“rem”一起使用,用"px"来实现IE6-8下的效果,然后使用“Rem”来实现代浏览器的效果。就让IE6-8不能随文字的改变而改变吧,谁让这个Ie6-8这么二呢?哈。。。。大家不仿试试,还蛮有意思,说不定这个就是主流的度量单位了。

总结
一、PX特点
1. IE无法调整那些使用px作为单位的字体大小;
2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;
3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。
px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。
二、EM特点
1. em的值并不是固定的;
2. em会继承父级元素的字体大小。
所以我们在写CSS的时候,需要注意两点:
1. body选择器中声明Font-size=62.5%;
2. 将你的原来的px数值除以10,然后换上em作为单位;
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。
三、rem特点
rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

关于CSS中怎么设置字体大小就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

--结束END--

本文标题: CSS中怎么设置字体大小

本文链接: https://www.lsjlt.com/news/75073.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • CSS中怎么设置字体大小
    这篇文章将为大家详细讲解有关CSS中怎么设置字体大小,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。PX为单位在Web页面初期制作中,我们都是使用“px”来设...
    99+
    2022-10-19
    css
  • css怎么设置div字体大小
    小编给大家分享一下css怎么设置div字体大小,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!css设置div字体大小的方法是,给...
    99+
    2022-10-19
    css div
  • html中css如何设置字体大小
    这篇文章主要介绍了html中css如何设置字体大小,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。css的基本语法是什么css的基本语法是:1、css规则由选择器和一条或多条声...
    99+
    2023-06-14
  • 如何在css中设置字体大小
    这期内容当中小编将会给大家带来有关如何在css中设置字体大小,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。css字体大小设置的方法:css可以使用font-size属性设置字体大小,实际上它设置的是字体中...
    99+
    2023-06-14
  • PHP中怎么设置字体大小
    这篇文章主要介绍“PHP中怎么设置字体大小”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“PHP中怎么设置字体大小”文章能帮助大家解决问题。一般来说,PHP的主要任务是在服务器上处理请求并生成HTML...
    99+
    2023-07-05
  • plsql怎么设置字体大小
    在PL/SQL中,无法直接设置字体大小,因为PL/SQL本身并不负责显示界面。PL/SQL是一个过程化的编程语言,用于编写存储过程、...
    99+
    2023-08-31
    plsql
  • pycharm怎么设置字体大小
    要更改PyCharm的字体大小,请按照以下步骤进行操作:1. 打开PyCharm并进入“File”菜单。2. 选择“Settings...
    99+
    2023-09-07
    pycharm
  • DIV字体大小怎么设置
    这篇文章主要讲解了“DIV字体大小怎么设置”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“DIV字体大小怎么设置”吧!一、标签内设置字体大小 &nb...
    99+
    2022-10-19
    div
  • 怎么设置html字体大小
    使用绝对单位、使用相对单位和使用CSS样式表均可设置html字体大小。1、使用绝对单位设置字体大小,像素,磅,毫米或厘米;2、使用相对单位设置字体大小,百分比,相对于视口的单位;3、使用CSS样式表设置字体大小,链接外部CSS样式表,内联样...
    99+
    2023-08-14
  • pycharm字体大小怎么设置
    pycharm字体大小的设置有“使用设置菜单”、“使用编辑器右下角的缩放控制”和“使用配置文件修改”三种方法:1、打开PyCharm并选择“File”,选择“Settings”选项,展开“Editor”选项,然后选择“Font”,选择想要的...
    99+
    2023-12-11
    pycharm字体 pycharm
  • CSS布局中怎么设置字体文字大小值大于行高值
    这篇“CSS布局中怎么设置字体文字大小值大于行高值”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看...
    99+
    2022-10-19
    css
  • CSS div的字体大小如何设置
    这篇文章主要介绍“CSS div的字体大小如何设置”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“CSS div的字体大小如何设置”文章能帮助大家解决问题。 字体配...
    99+
    2022-10-19
    css div
  • css如何设置字体颜色大小
    这篇文章将为大家详细讲解有关css如何设置字体颜色大小,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。css设置字体颜色大小的方法:1、通过“<font size="12px"&g...
    99+
    2023-06-15
  • css里如何设置字体大小和字体颜色
    本篇内容主要讲解“css里如何设置字体大小和字体颜色”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“css里如何设置字体大小和字体颜色”吧! ...
    99+
    2022-10-19
    css html
  • css中设置标题字体大小的方法
    这篇文章主要介绍“css中设置标题字体大小的方法”,在日常操作中,相信很多人在css中设置标题字体大小的方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”css中设置标题字体...
    99+
    2022-10-19
    css
  • css样式中设置字体大小的方法
    这篇文章将为大家详细讲解有关css样式中设置字体大小的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。在css样式中,可以利用“font-size”属性来设置字体大小,只需给文本元素设置“font-si...
    99+
    2023-06-15
  • css中怎么重置浏览器字体大小
    css中怎么重置浏览器字体大小,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。代码如下:body,div,dl,dt,dd,ul,ol,li,h...
    99+
    2022-10-19
    css
  • css如何设置p标签字体大小
    在css中设置p标签字体大小的方法:1.创建p标签,并添加文字;2.使用font-size属性设置字体大小;在css中设置p标签字体大小的方法首先,在页面中创建一个p标签,并添加文字; <body> &nbs...
    99+
    2022-10-12
    css p标签
  • css怎么重置浏览器字体大小
    本篇内容介绍了“css怎么重置浏览器字体大小”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!代码如下:body,div,dl,dt,dd,ul...
    99+
    2023-07-04
  • php怎么设置打印字体大小
    本文操作环境:windows7系统、PHP7.1版、DELL G3电脑php怎么设置打印字体大小?php编写网页如何修改字体大小代码如下:<div class="bottom-text footer-columns"...
    99+
    2021-02-02
    php
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作