css笔记：字体与图标字体

最新推荐文章于 2024-05-30 15:01:09 发布

abc630727719

最新推荐文章于 2024-05-30 15:01:09 发布

阅读量159

点赞数

分类专栏： # css 文章标签： css

本文链接：https://blog.csdn.net/abc630727719/article/details/105079796

版权

css 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

本文介绍了CSS中关于字体的设置，包括color、font-size、font-family的使用，讲解了如何选择不同类型的字体，以及如何设置字体备选方案。同时，文章探讨了@font-face规则用于自定义字体，并提到了字体的版权问题。此外，还详细讨论了图标字体的运用，如FontAwesome和阿里巴巴的Iconfont，提供了这两个图标库的下载和使用方法。

摘要由CSDN通过智能技术生成

                    
                        
                    
                    Font 
color
 设置字体的颜色
font-size
 设置字体大小
font-family
 设置字体库中的字体
 可选值： 
  serif 
 衬线字体
 
sans-serif 
 非衬线字体
 
monospace
 等宽字体，每个字母的宽度都是相同的
 
 
字体可以设置多个，中间用’，'隔开,前面的字体优先使用。
 当用户电脑中前面的字体不存在时，按顺序使用的后面的字体
@font-face
 也可以将字体上传到服务器，提供用户下载使用@font-face {
        font-family: 'myFont';		//设置字体的别名
        src: url('myFont.ttf');		//字体存放的地址
    }
 缺点： 
  版权
打开网页慢
 
图标字体库 
  fontawesome 国外的网站（免费）
 官网：https://fontawesome.com
 下载地址：https://download.csdn.net/download/abc630727719/12268024
iconfont 阿里巴巴图标库 (商用联系作者是否有版权)
 官网：https://www.iconfont.cn/
 
图标字体使用方式 
  直接添加class属性<i class="fab fa-apple" style="font-size: 50px;"></i>
 
添加实体<i class="fab" style="font-size: 50px;">&#xf179;</i>
 
在元素前面添加.icon2:before{
    content: '\f179';
    font-family: 'Font Awesome 5 Brands';
    font-size: 50px;
    font-style: normal;       
}
 
 

                