千锋教育-做有情怀、有良心、有品质的职业教育机构

当前位置:首页  >  关于学院  >  技术干货  >  html5技术干货  >  正文

CSS字体风格和样式简写

来源:千锋教育
作者:qyf
关键词: font 样式
2023-01-17
分享

  通过 CSS 可以设置文本倾斜、文本粗细以及文本大小写等字体风格。

  font-style 属性主要用于指定斜体文本。

  这个属性有三个值:

  normal,文本正常显示。

  italic,文本斜体显示。

  oblique,和 italic 非常相似,但浏览器支持度较低

  在 006 文件夹下创建一个 font-style.html 文件,构建基本代码,添加一个 h1 元素和三个 p 元素并添加文本,给三个 p 元素定义 class 属性,值分别为 p1、p2、p3。

  在这个文件夹下再创建一个 mystyle-2.css 文件。定义选择器 p.p1,声明样式 font-style: normal。定义选择器 p.p2,声明样式 font-style: italic。定义选择器 p.p3,声明样式 font-style: oblique。

  在页面里引入样式文件。

  在浏览器里预览页面,第一个段落正常显示,另外两个段落倾斜了。

  font-weight属性指定了一个字体的粗细。属性值设置有两种方式:名称和数值。

  名称有四个:lighter,细体;normal,正常字体;bold,加粗字体;bolder,更粗字体。

  数值有9个:100,200,300,400,...一直到 900。这种方式更能精细化的控制文本的粗细,值越大,文本越粗。

  数值和名称的对应关系是:100 对应 lighter;400 对应 normal;700 对应 bold;900 对应 bolder。

  定义 h1 选择器,声明样式 font-weight: normal。

  给 p1 添加声明 font-weight: bold。

  给 p2 添加声明 font-weight: 700。

  给 p3 添加声明 font-weight: 100。

  我们看效果,标题 h1 默认是粗体显示,现在正常显示了。第一个段落和第二个段落都加粗了。最后一个段落变细了。

  font-variant 属性指定了文本,是否应以小型大写字符显示。所谓小型大写字母,就是小一号的大写字母,正常的大写字母——四线三格里占据前两行,而他只占用第二行。它有两个值:normal 和 small-caps,后者表示设置小型大写字母。这个属性只对英文有效。

图片3

  给 p3 添加声明 font-variant: small-caps。

  我们看,小型大写字母的效果实现了!

  为了缩短代码,可以在一个 font 属性中指定所有单独的字体属性。

  font 是一个简写属性,它的值可以是 font-style、font-variant、font-weight、font-size/line-height(读作 font-size 斜线 line-height)、font-family 组合在一起的值,中间用空格分开。

  其中,font-size 和 font-family 这两个值是必须的。其他值缺少的话,使用他们的默认值。

  回到样式代码,给 p3 添加两个样式声明 font-size: 30px,line-height: 30px,font-family: 华文仿宋。

  我们看,第三个段落应用了6个样式效果:细体、倾斜、英文小型大写、30像素大小、行高30像素、字体为华文仿宋。

  我们试着用 font 属性,重新声明一下样式。注释掉所有在 p3 上声明的样式。

  声明 font 属性,值为 oblique 100 small-caps 30px/30px 华文仿宋。

  效果是一样的!但是样式的代码简洁了许多。

  (此时需要展示比较的样式代码)

  如果我们去掉字体或者字号,比如去掉华文仿宋。

  样式全部失效了!

  如果保留字号和字体,删除其他样式声明。

  样式还是有效的!

声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。

上一篇

CSS文本装饰

下一篇

相关推荐

  • CSS字体风格和样式简写 回到样式代码,给 p3 添加两个样式声明 font-size: 30px,line-height: 30px,font-family: 华文仿宋。我们看,第三个段落应用了6个样式效果:细体、倾斜、英文小型大写、30像素大小、行高30像素、字体为华文仿宋。
  • CSS文本装饰 通过CSS文本装饰可以为文本添加装饰线、为装饰线设置颜色、为装饰线指定风格、为装饰线设置厚度等效果。为文本添加装饰线通过 text-decoration-line 属性实现,可以结合一个以上的值,如上划线和下划线,来显示文本上方和下方的线条。具体的值有三个:
  • 数组扁平化 toString(),将数组转化为字符串,结果是获取数组中的每一个单元的数据组成一个字符串,使用逗号间隔再以逗号为间隔,将字符串转化为数组function fun1( arr ){ let str = arr.
  • 柯理化函数 所谓的柯里化函数指的是:把接受多个参数的函数变换成接受一个单一参数的函数,并且返回接受余下的参数而且返回结果的新函数//普通的add函数 function add(x, y) { return x + y } // Currying后 function curryingA...
  • 谈一谈垃圾回收机制? 垃圾回收是动态存储管理技术,会自动地释放“垃圾‘’(不再被程序引用的对象),按照特定的垃圾收集算法来实现资源自动回收的功能。 回收的两种机制
  • 函数的节流和防抖? function thro(cb,wait){ let timeOut return function(){ if(timeOut) return timeOut = setTimeout(function(){ cb() clearTimeout(timeOut) ti...