建站学习网,专业提供各类建站教程,网页素材,SEO资讯等建站资源!

网站模板_网站源码_网站素材_建站教程_建站学习网

当前位置:建站学习网 > DIV+CSS教程 > DIV CSS教程 >

CSS中的font-size属性使用教程

更新时间:2016-12-23整理编辑:建站学习网阅读:0

   基本语法结构:

  Font-size+字体大小数值+单位

  单词:font-size

  语法:font-size : absolute-size | relative-size | length

  取值:xx-small | x-small | small | medium | large | x-large | xx-large

  xx-small:最小

  x-small:较小

  small:小

  medium:正常(默认值),根据字体进行调整

  large:大

  x-large:较大

  xx-large:最大

  也可取具体长度单位值

  可用的单位

  有几种不同的方法可以在CSS中声明字体大小。总的来说,这些单位分为两类——相对和绝对。 绝对单位(大多)是固定的,并且涉及到一些物理的测量。他们一旦被声明,将不能通过改变其他元素的字体大小来改变他的大小。

  相对单位没有一个客观的测量。相反,它们的实际大小是通过父元素的尺寸来确定的。这意味着他们的大小可以通过改变相关元素的大小来改变。

  下面是一些单位的概要描述——

  在这里你可以看到单位的详细列表,但我将专注于我认为最常用的单位——px, pt, %, em, rem, 和 vw。

  他们有什么区别?

  这些单位之间的差异可能很难通过概念理解,所以最好的方式就是通过例子来展示他们之间的差异。

  例子1——默认设置

  在一个空白的HTML文档内,你没有任何关于字体大小的声明而只使用默认设置。在大多数浏览器上为html和body标签的默认字体大小为100%。这等同于如下算式——

  CSS Code复制内容到剪贴板

  100% = 1em = 1rem = 16px = 12pt

  这意味着如果你为一个

标签设置字体大小为100%,另一个

为16px,他们将以相同的大小呈现在屏幕上。你可以在这里看到这个证明——

  例子2——绝对单位VS相对单位

  绝对和相对单位之间的差异可以通过改变html的字体大小来突出显示。如果我们设置html{font-size:200%},这将只影响

用相对单位设置的字体的大小。

  这是使用相对单位的一个重要优势。有了如此轻易缩放字体大小的功能,你可以通过只改变html字体大小来创建一个真正具有响应性的网站。这里有一个很好的例子

  例子3——REM VS EM(和%)

  em(和%)单位是通过计算父元素的字体大小来显示当前的字体大小。比如——

  CSS Code复制内容到剪贴板

  html {

  font-size: 100% /* =16px */

  }

  body {

  font-size: 2em; /* =32px */

  }

  p {

  font-size: 1em; /* =32px */

  /* font-size: 0.5em; =16px */

  }

  因为p继承body,body继承html,所以我们可以计算出以em和%设置的段落字体大小变成(默认大小)两倍。

  当你为一个元素使用em单位时,你必须考虑到所有父元素的字体大小。正如你看到的,这很容易(让字体大小的计算)变得复杂而凌乱。

  解决这个问题的便是rem。rem是基于html元素的字体大小而不是父元素。比如——

  CSS Code复制内容到剪贴板

  html {

  font-size: 100% /* =16px */

  }

  body {

  font-size: 2rem; /* =32px */

  }

  p {

  font-size: 1rem; /* =16px */

  }

  使用rem可以让你拥有em和%的缩放能力而无需处理嵌套问题。

  例子4——视口宽度大小

  vw是CSS3新加入的一个使用视口宽度来计算字体大小的单位。这样可以允许更多的响应字体大小。

  尽管这似乎是为响应式设计的一个很有用的单位,但我个人不是它的粉丝。因为它并不能在字体大小上给我更多的控制权,他总是显示的过大或过小。

  我的方法

  在我做这项研究之前,我一直使用像素来设置我的字体大小。这是因为现在的大多数浏览器允许用户在字体太小的情况下自行放大页面,所以使用像素并没有什么问题。

  但是,我发现这种方式在很大程度上限制了扩展能力。虽然我的字体在中小屏幕上看起来不错,但他应该在大屏幕上有更好的优化。即便用户有放大的选项,这也不应该是我们希望他们来做的事情。

  因此我使用rem设置的解决方案是(使用像素作为备用)。

  CSS Code复制内容到剪贴板

  html {

  font-size: 62.5%; /* sets the base font to 10px for easier math */

  }

  body {

  font-size: 16px;

  font-size: 1.6rem;

  /* sets the default sizing to make sure nothing is actually 10px */

  }

  h1 {

  font-size: 32px;

  font-size: 3.2rem;

  }

  这样我扩大了字体大小而只需要这样写——

  CSS Code复制内容到剪贴板

  @media screen and (min-width: 1280px) {

  html {

  font-size: 100%;

  }

  }

  这个方法是用像素作为降级单位因为IE8及以下不支持rem。这有一个问题是当我改变基础字体大小时只能应用在可扩展性大小上面而不适用于后备字体大小。不过我不认为这是一个巨大的问题,因为这个问题对于较大规模的设备的核心来说只是一个额外的问题。

  如果你有任何关于如何改善这个问题的想法,请在评论里让我知道。我也可以写一个SCSS的混入,这样我可以不必输入这两个后备和rem单位。

本文网址:https://www.dedexuexi.com/divcss/jc/1358.html

文章搜集与网络,如有侵权请联系本站,转载请说明出处。

标签:技巧
收藏此文 赞一下!() 打赏本站

如本文对您有帮助,就请建站学习网抽根烟吧!

  • 支付宝打赏
    微信打赏
CSS中行高line-height属性的一些使用技巧
« 上一篇2016年12月23日
CSS3中的opacity属性使用教程
2016年12月23日下一篇 »
  • DIV CSS如何给文字字体添加下划线?
    0阅读
    在css中可以使用text-decoration属性或border-bottom属性来给文字添加下划线样式。下面本篇文章就来给大家介绍一下,希望对大家有所帮助。方法1:使用text-decoration属性设置css的text-decoration属性用于指定添加到文本的修饰,其underline属...
  • 纯CSS3实现带动画效果导航菜单无需js
    0阅读
    随着互联网的发展,网页能表现的东西越来越多。由最开始单纯的文字和链接构成的网页,到后来的表格布局,再到div+css模式,现在发展到了 html+css3。网页能表达的东西越来越多,css3兴起已经
  • CSS定义超链接四个状态的正确顺序L-V-H-A
    0阅读
    css定义超链接是要有先后顺序的。否则,在某些浏览器里面有可能会出现某个样式不起作用的bug。不能正确显示想要的效果。 CSS属性的排列顺序: L-V-H-A 。 L-V-H-A是link、visited、hover、active的简写
  • 在ie7下css居中样式text-align:center;偏左问题解决方法
    0阅读
    css样式text-align:center;在ie7下偏左问题,想必有很多朋友的遇到过吧,下面有个不错的方法,大家可以参考下,希望对大家有所帮助 复制代码 代码如下: body { text-align:center; } 用ie7打开是居左的。
  • 对div盒子模型使用心得总结
    0阅读
    相信每一个从事web开发的人对盒子模型都有一个特殊的理解吧,本文也有一个理解并附有示例代码,喜欢的朋友可以参考下 盒子模型的计算 外边距(margin)+边框(border)+内边距(padding)+内容(content