江苏龙网

  1. 主页 > 生活百科 > >

前端入门——css字体和文本

CSS字体

在网页中文字作为信息的主要载体，非常重要，之前学习过html中关于文本、段落等格式的知识，这些只是简单排版，如果想制作更好看的文本样式，就的使用css 字体和文本样式了 。
css字体css 字体属性主要包括字体系列、字体大小、字体风格等其它样式 。
1、设置字体系列 —— font-family
这个属性用来设置网页使用哪种类型的字体显示文本，语法如下：
font-family: "字体1"，"字体2"，"字体3"...font-family 属性可以定义多个字体，浏览器会从前到后优先选择使用字体，当浏览器不支持第一个字体，则会尝试使用第二个字体，以此类推 。如果浏览器不支持所有字体，则使用默认字体 。
如下示例：

前端入门——css字体和文本

文章插图
 
2、字体样式—— font-style
字体样式有三种：
  • 正常 - 正常显示文本
  • 斜体 - 以斜体字显示的文字
  • 倾斜的文字 - 文字向一边倾斜（不管是斜体字还是正常的字体）
如下示例：
前端入门——css字体和文本

文章插图
 
这里有2种斜体，它们有什么区别？
italic 和 oblique 都是向右倾斜的文字, 但区别在于 italic 是指斜体字，而 oblique 是倾斜的文字，对于没有斜体的字体应该使用 oblique 属性值来实现倾斜的文字效果 。
3、字体大小 —— font-size
“font-size”属性来设置字体大小，它的值可以使用预定义关键字、绝对大小、相对大小 。
预定义关键字
预定义关键字有 xx-small、x-small、small、medium、large、x-large、xx-large，尺寸按顺序依次增大 。它的可选范围只有这几种，且不同浏览器厂商定义的预定义关键字对应的字体大小不一致，所以相同的属性值，在不同浏览器看到的大小不一样，建议不要使用这种方式 。
绝对大小
绝对大小使用比如：px(像素)、pt(点，1pt 相当于 1/72in)、in(英寸)、cm(厘米)、mm(毫米)等单位设置字体大小 。
如下示例：
前端入门——css字体和文本

文章插图
 
绝对大小不会随着页面大小改变而改变，如果要想使文字大小自适应不同的屏幕或设备就需要使用相对大小 。
相对大小：
相对大小使用 em、%、rem等来设置大小，它们都是相对于某个参考基准的字体大小，来计算当前字体的大小，只是参考基准不同而已 。
如果你不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（1em = 16px,100%=16px） 。
em和%都是相对于父级元素的字体大小，其子级元素会在其父级元素的计算结果上继续计算大小，如下示例：
前端入门——css字体和文本

文章插图
 
如上p元素的字体大小是36px，而不是12px * 200%等于24px，它是在其父级div元素的计算结果上继续计算的值 。
使用em 或 %虽然可以方便修改文字大小，但是当元素嵌套很深的时候，就变得比较复杂，深层的元素文字大小就变得不可控，所以css3 新增加了rem 来设置字体大小 。
rem 是相对于根元素 （html 元素） font-size属性的值，每一层级都会参考html根元素的字体大小来计算，这样一来，无论嵌套多少层，字体大小的计算就变得统一了 。
rem 是CSS3新增的一个相对单位，IE9 以下版本的老浏览器却不支持它，这也是很多编程人员尚未使用 rem 的原因 。
在定义字体大小时，建议在 html 元素中定义绝大多数元素所需要的字体大小，并让所有子元素继承 html 的字体大小 。如果某个子元素要改变字体大小，则使用相对尺寸 em 或 % 或 rem 重新定义 。
4、复合属性—— font
font 属性可以看成是字体的简写，它可以定义字体系列、大小、风格、粗细、等样式，语法如下：
font："font-style font-variant font-weight font-size/line-height font-family"其中font-size和font-family的值是必需的 。如果缺少了其他值，将使用浏览器的默认值 。
如下示例：
前端入门——css字体和文本

文章插图
 
除了以上设置，font还有其它的属性值，如下：
前端入门——css字体和文本

文章插图
 
这些属性，只有部分浏览器支持，具体使用时请查看浏览器是否支持 。


推荐阅读


上一篇：使用 Deno 如何将 Node.js 库转换为 Deno 库

下一篇：二维码的升级版「三维码」你使用过吗？