web前端css的复习(五)css字体样式

目录

  1. 字号大小
  2. 字体样式
  3. 字体常用小技巧
  4. 字体加粗
  5. 字体风格
  6. 字体综合属性

       本篇文章将为大家带来本复习系列的第一个样式,文字样式,不用慌,其实很简单的,加油啊,小伙伴们,冲啊。

  1. 字号大小

           我们随便打开一个网站,进入一篇文章里面,我们通过文章里面的内容获取信息,但是我们获取信息的前提是什么呢?是什么呢?没有错,就是能看见,你首先要能看见你才能获取里面的内容吧。通常什么情况我们看不清呢,一个最主要的原因就是字太小了。现在学习了css,我们就有办法让我们的字体变大了。
font-size:字号大小

              上面就是关于字体大小的属性了。
让我们来看看具体怎么用吧。
在这里插入图片描述
              这是很正常的一句话,下面我们来为它添加一点样式,比如字体大小。

      p {
            font-size: 30px;
        }

在这里插入图片描述
              在我们加了上面的样式之后字体就变得那么大了,是不是看起来很清晰呢。


  1. 字体样式

           古人常说,看字即看人,古有王羲之,今有web前端者,咳咳咳,哈哈,开个玩笑,不过这个web前端者虽然我们不能说写的像王羲之一样好吧,但是我们能让我们页面的字体的样式多啊。比如这样。
font-family:字体---可以同时指定多个字体,中间用,隔开,表示如果
浏览器不支持第一个字体,则会尝试下一个,直到找到合适的为止。

              说到字体就不得不说我们现在项目开发的话基本上都是用Unicode字体来表示的。

              比如两个常用的:

              (一)宋体:\5B8B\4F53
              (二)微软雅黑:\5FAE\8F6F\96C5\9ED1


  1. 字体常用小技巧

           (一)现有浏览器中网页普遍使用14px。
           (二)尽量使用偶数的数字字号,像ie6等旧版本使用奇数会出现bug。
           (三)各种字体之间必须用英文状态下的逗号隔开。
           (四)中文字体需要加英文状态下的引号,英文字母一般不需要加引号。当需要设置英文字体时,英文字体名必须位于中文字体名之前。
           (五)如果字体名中包含空格等特殊字符,则该字体必须加英文状态下的的单引号或者双引号。
           (六)尽量使用系统默认字体,保证在任何用户的浏览器中都能使用。

  1. 字体加粗

           重新返回到我们的第一个标题,字体大小那里,有些时候,字体看着是大了,但是吧,太细了或者太粗了,同样,通过css也能完美的控制它。
font-weight:定义加粗

              属性值:normal,bold,bolder,lighter,100~900。

              注:400等价于normal即正常字体。700等价于bold即加粗字体,平常项目中我们更喜欢用数字去表示字体粗细。


  1. 字体风格

           我相信大家都用过word吧,word中你的字体是可以设置大小,字体和倾斜度的对吧,大小和字体我们都讲过了,那么同样,word中能实现的css也能实现,css中也存在改变字体风格的属性。例如
font-style:normal(正常)italic(倾斜)

              上面的是两种最最常用的字体风格了,其他的我很少很少用到,用的时候直接百度就可以了。

              注:一般实际项目中,很少给文字添加倾斜,反而是用<em><i>去改变字体倾斜。


  1. 字体综合属性

           实际的项目开发中我们是不会一条一条的写字体样式的,实际项目中最重要的是效率,那么我们就能猜到,实际上一定是存在一种简单的写法的,把文字的属性都包含进去的那种,那么,还别说,css里面真的有。
font: font-style font-weight font-size font-family;

              注:一定不能更换顺序,并且每个属性值之间用空格隔开。

              注:对于不需要设置的值可以省略,但是必须保留font-size和font-family属性,不然font不会起作用

猜你喜欢

转载自blog.csdn.net/qq_40851232/article/details/89031714