CSS3自定义字体、字体图标

最新推荐文章于 2022-11-21 15:01:37 发布

大大大老猫

最新推荐文章于 2022-11-21 15:01:37 发布

阅读量982

点赞数 1

文章标签：自定义字体字体图标 CSS

本文链接：https://blog.csdn.net/actionActivity/article/details/90142935

版权

本文介绍了CSS3中的自定义字体功能，当用户的操作系统缺少特定字体时，可以从服务器下载，保证用户体验。接着讨论了字体图标，指出其轻量、灵活、兼容性的优点以及单色限制和版权问题的缺点。详细阐述了制作字体图标的步骤，并提供了一个转换工具的链接。最后，展示了如何在HTML中使用字体图标，并给出了示例代码。

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

自定义字体

通常情况下，我们一般在设置字体的时候设置的是操作系统上的字体。如果用户的操作系统中没有该字体就会影响整个前端的一个用户体验。

在CSS3 中，新增了自定义字体的内容，可以让我们自己定义一个字体，然后放到服务器上，这样尽管用户的操作系统中没有该字体，也会从服务器下载到指定的字体，不会影响用户体验。

文件结构如下
在这里插入图片描述

<style>
	/* 使用 @font-face 来指定一个自定义的字体 */
    @font-face {
    
        font-family: "Custom font";  /* 起一个名字 */
        src: url("fonts/Courier New.ttf");  /* 指定一下字体的位置 */
    }

	
    p {
    
        font-family: "Custom font";  /* 为 p 元素设置这个自定义字体 */
        font-size: 20px;	/* 设置字体大小 */
    }
</style>

<body>
    <p>Hello, this text font is a custom font...</p>
</body>

运行结果
在这里插入图片描述

字体图标

使用字体图标可以在网页加载的时候被快速渲染出来，减少了图片的请求次数，减少网络负担。

字体图标的优缺点

优点

轻量性：一个图标字体比一系列的图像（特别是在Retina屏中使用双倍图像）要小。一旦图标字体加载了，图标就会马上渲染出来，不需要下载一个图像。可以减少HTTP请求，还可以配合HTML5离线存储做性能优化。
灵活性：图标字体可以用过font-size属性设置其任何大小，还可以加各种文字效果，包括颜色、Hover状态、透明度、阴影和翻转等效果。可以在任何背景下显示。使用位图的话，必须得为每个不同大小和不同效果的图像输出一个不同文件。
兼容性：网页字体支持所有现代浏览器，包括IE低版本。