关于前端:零基础教你学前端64CSS字体和字号

46次阅读

共计 2693 个字符,预计需要花费 7 分钟才能阅读完成。

为你的网站抉择正确的字体,可能进步用户浏览网站的体验——失当的字体能够为你的品牌发明一个弱小的视觉标识。应用一种易于浏览的字体,比方为字体抉择正确的色彩和文字大小,都是十分重要的。

咱们首先来理解如何设置字体。

在 CSS 中,咱们应用 font-family 属性来指定一个文本的字体。属性值是一个字体的名称。

字体都有哪些名称呢?要答复这个问题,就须要理解一下字体的常识了。

在 CSS 中,英文字体有五类:

第一类,Serif[ˈserɪf]:有衬线字体,在每个字母的边缘都有一个小笔划。它们发明了一种正式和优雅的感觉。比方:Times New Roman[ˈrəʊmən],Georgia[ˈdʒɔːdʒə],Garamond。

第二类,Sans-serif:无衬线字体,有洁净的线条,也就是不附带小笔画。它们发明了一种古代和简洁的外观。比方 Arial,Verdana,Helvetica。这个 Helvetica 字体还被拍成了一步电影——《传奇字体 Helvetica》。

第三类,Monospace:单空格字体,这里所有的字母都有雷同的固定宽度,因而又叫等宽字体,它们发明了一种机械的外观。个别咱们在代码编辑器中会应用这些字体。比方 Courier New,Lucida Console,Monaco。

第四类,Cursive:草书字体,模拟人类的手写体。比方 Brush Script MT,Lucida Handwriting。

第五类,Fantasy:空想字体,是装饰性、娱乐性字体。比方 Copperplate,Papyrus

绝对于英文字体,你可能更相熟中文字体。在 CSS 中,中文字体名称都有哪些呢?

在中文的网站中,比拟通用的中文字体有两个:Microsoft Yahei,微软雅黑;PingFang SC,苹方简。别离利用于 Windows 零碎和 Mac 零碎。

这里你可能会问,中华文化博大精深,中文字体也目不暇接,怎么只用这两个字体呢?因为在 CSS 里设置的字体名称,得须要用户的电脑里存在这个字体。如果你想应用任意的字体,咱们在前面的课程里给你答案。如何查看本人的电脑里都装置了什么字体呢?

以 chrome 浏览器为例,点击这个图标,再点击设置,抉择外观,自定义字体。这里有规范字体、有衬线字体、无衬线字体、等宽字体的设置。点击任何一个下拉框,就能看到本人电脑里的字体了。

咱们来做个例子。

创立一个文件夹 006-css-fonts,在文件夹里创立一个 font-family-size.html 文件,构建根本代码,增加 h1,h3,p 三个元素,别离填入一些文本。

再创立一个 mystyle-1.css 文件,定义 h1 选择器,申明款式 font-family: PingFang SC。定义 h3 选择器,申明款式 font-family: Copperplate。定义 p 选择器,申明款式 font-family: 华文仿宋。

再次强调,这里的字体名称,肯定要在网页浏览者本人的电脑里存在才能够失效!

在页面里引入款式文件。

在浏览器中预览页面,题目和段落都利用了不同的字体。

你可能会问,我在 CSS 里设置的字体名称,一旦用户的电脑里没有怎么办?咱们能够给他定义几个款式备选。

比方,h3 的 Copperplate,假如用户的电脑里不存在,能够在后面再增加一个 Brush Script MT 字体,用逗号分隔开。

咱们看,文字利用了 Brush Script MT 字体。

假如这个字体也不存在,在后面再增加一个字体 Courier New。

咱们再看,文字利用了 Courier New 字体。

这阐明,先定义的字体优先起作用。如果定义的字体用户电脑里都不存在,浏览器就应用默认字体了。当然,默认字体也能够自定义设置。

个别状况下,多个单词名称的字体,举荐应用单引号或者双引号引起来。

接下来,咱们来给字体设置字号。

文本字号,也就是文本的大小,在网页设计中是很重要的,它能够使网页文字布局有层次感,便于浏览,加强用户体验。

在 CSS 中,通过 font-size 属性设定文本的大小。属性值能够是相对大小,也能够是绝对大小。

相对大小。将文本设置为指定的大小,不容许用户在所有的浏览器中扭转文字的大小。

举个例子,如果我视力不佳,把浏览器的字号设置的比拟大时,页面的字号会同比放大。

在 p 元素上申明款式 font-size: 20px。

这里须要提醒一下:如果不指定字体大小,失常的文本,比方段落,会继承先人元素的大小,如果先人元素没有设置字体大小,就会应用浏览器设置的默认字号,大小为 16px。

回到浏览器,你会发现,无论用户把浏览器的字号设置为多大,段落的文字始终都是 20 像素。

这难道通知咱们,不要把元素的大小设置为绝对值吗?当然不是了,当页面输入的物理尺寸已知时,相对大小是很罕用的。那绝对大小如何设置呢?

绝对大小,也就是绝对于四周元素的大小,应用 em 这个单位来设置。个别状况下,会依据继承下来的父元素尺寸计算失去。

比方,这个页面的 p 元素的父元素是 body,咱们给 body 申明 font-size 为 16px,给 p 元素申明 font-size 为 2em。转化为相对大小为 2 乘以 16px 等于 32px。

在浏览器里察看后果,用尺子量一下,果然是 32 像素!

如果在 body 元素里没有申明 font-size,p 元素文字大小就绝对于浏览器默认的字号——也就是 16 px。所以,2em 大小还是 32px。

在浏览器里验证一下,字体大小果然没有发生变化!

当咱们调整浏览器的字号时,段落的文本变大了!

这阐明,绝对单位容许用户在浏览器中扭转文本大小。

除了 em,还能够应用百分比 (%) 这个单位,它是绝对于父元素的大小来计算文本尺寸的。应用办法和成果与 em 相似。

比方定义 p 元素的 font-size 为 200%。

此时,段落文字的大小仍然是 32 像素。

方才咱们提到,em 示意的文本大小,是依据继承下来的父元素大小计算失去的。如果元素嵌套层数太多,父元素 font-size 的值也用 em 来设置,父元素的父元素 font-size 的值还是用 em 来设置,这样计算起来就比拟麻烦了。有没有更好的解决方案呢?

答案就是:应用 rem 这个绝对单位。rem,全称是 Relative to the root element,绝对于根元素。这样,咱们就不必像 em 那样,计算那么多先人元素的大小了。

那么,html 文档哪个元素是根元素呢?

没错,就是 html 元素,

在款式里,定义 html 元素,申明款式 font-size: 16px。正文上一个代码,申明 font-size 属性,值为 2rem。

查看成果,段落文字的大小依然为 32 像素。

文章配套视频链接:https://www.bilibili.com/vide…

正文完
 0