标签：--   through   居中   span   ref   sans   上下   标签   awesome   

Html&Css06：字体

• html==>结构
• css ==>表现
• js ==>行为

1、字体相关的样式

• color 用来设置字体的颜色

• font-size 字体的大小

  • em 相当于当前元素的一个font-size
  • rem 相对于根元素的一个font-size
  • px

• font-family 字体族（字体的格式）

  • serif 衬线字体
  • sans-serif 非衬线字体
  • monospace 等宽字体

• font-family 可以同时指定多个字体，多个字体间使用,隔开
  字体生效时优先使用第一个，第一个无法使用则使用第二个 以此类推

  Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif
  

1.1、服务器中的字体

font-face可以将服务器中的字体直接提供给用户去使用
问题：
1.加载速度
2.版权
3.字体格式

• 代码如下

   @font-face {
                  /* 指定字体的名字 */
              font-family:‘myfont‘ ;
              /* 服务器中字体的路径 */
              src: url(‘./font/ZCOOLKuaiLe-Regular.ttf‘) format("truetype");
          }
  

1.2、图标字体（iconfont）

• 在网页中经常需要使用一些图标，可以通过图片来引入图标
  但是图片大小本身比较大，并且非常的不灵活
• 所以在使用图标时，我们还可以将图标直接设置为字体，
  然后通过font-face的形式来对字体进行引入
• 这样我们就可以通过使用字体的形式来使用图标

1.3、fontawesome 使用步骤

? 1.下载 https://fontawesome.com/
? 2.解压
? 3.将css和webfonts移动到项目中
? 4.将all.css引入到网页中
? 5.使用图标字体

直接通过类名来使用图标字体，如下

class="fas fa-bell"
class="fab fa-accessible-icon"

1.4、伪元素和实体

 


锄禾日当午
        
汗滴禾下土
        
谁知盘中餐
        
粒粒皆辛苦
    

    

1.5、阿里的字体库

	


    
    

    

    
Hello

1.6、行高

1.7、字体的简写属性

1.8、文本的样式

1.8.1、样式一

1.8.2、样式二

        Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, minus fugit in perspiciatis reprehenderit consequuntur aspernatur repellat cumque quidem asperiores quaerat placeat, tenetur vel veritatis deserunt numquam. Dolores, cupiditate enim.
    

    

        今天天气真不错
    

完整的基础博文出完，本博主将会重新出一份争对常用标签/样式的博文，一起期待吧！

暴风雨的礼物·Html&Css06：字体

标签：--   through   居中   span   ref   sans   上下   标签   awesome   

原文地址：https://www.cnblogs.com/ilbty/p/13224044.html