CSS自定义字体

最新推荐文章于 2025-06-21 13:35:48 发布

幼儿园中的小小白

最新推荐文章于 2025-06-21 13:35:48 发布

阅读量461

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML与CSS

本文链接：https://blog.youkuaiyun.com/weixin_43846130/article/details/95963601

HTML与CSS 专栏收录该内容

27 篇文章

订阅专栏

博客主要介绍了字体相关知识，包括字体的定义、常见字体格式中format括号里的内容，以及如何引用字体图标，这些内容与前端开发中的字体设置相关。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、定义字体

    css: 允许自定义字体库的一个属性
    @font-face: 自定义字体信息
    format: 指定自定义的字体的格式

    指定字体的路径和字体格式:   src:url("fonts/icomoon.eot");

二、常见的字体格式：format括号里要写的东西

  eot: 兼容IE4以上的字体格式
  turetype: (.ttf)格式 IE9以上，firefox；
  opentype: (.otf)格式 欧朋，火狐 safari；
  woff: (.woff)格式 欧朋，火狐 safari 谷歌；
  svg: (.svg)格式 是基于SVG字体渲染的一种格式：是chrome4以上，safari，opera（欧朋）。

三、引用字体图标

<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	        @font-face {
	        font-family: "erhei";
	        src:url("fonts/icomoon.eot");
	        src: url("fonts/icomoon.svg") format('svg'),
	               url("fonts/icomoon.ttf") format("truetype"),
	               url("fonts/icomoon.woff") format("woff");
	      }
	/*使用字体*/
	        span {
	            font-family: "erhei";
	            font-size: 45px;
	     }
	/*伪元素*/
	        span::before {
	            content: "\e905";
	    }
	</style>
	</head>
	<body>
	        <span></span>    
	</body>
	</html>