CSS引入外部字体方法，附可用demo

最新推荐文章于 2024-08-10 17:13:35 发布

TANKING-

最新推荐文章于 2024-08-10 17:13:35 发布

阅读量5.6w

点赞数 6

分类专栏：前端文章标签： CSS 外部字体 CSS引入字体字体

本文链接：https://blog.csdn.net/weixin_39927850/article/details/79359185

版权

前端专栏收录该内容

45 篇文章 3 订阅

订阅专栏

有时候我们做的页面需要用到一些更好看的字体
又不想用图片代替，图片会影响加载速度
则使用外部字体来显示
但是直接通过font-family又不一定全部都行
这就需要我们在css中进行定义并且引入字体文件路径
然后再使用外部字体

直接上代码：
font.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS引用外部字体</title>
    <link rel="stylesheet" type="text/css" href="font.css">
</head>
<body>
<h1>里客云资源站</h1>
<h2>www.likeyunba.com</h2>
</body>
</html>

font.css

@font-face {
 font-family: 'fontnameRegular';
 src: url('fontname.eot');
 src: local('fontname Regular'),
        local('fontname'),
        url('fontname.woff') format('woff'),
        url('fontname.ttf') format('truetype'),
        url('fontname.svg#fontname') format('svg');
}  
/*其中fontName替换为你的字体名称*/
h1{font-family: fontnameRegular}

字体文件下载：
https://pan.lanzou.com/i0jon3e

其中上面的font.css
fontname代表字体文件名的名称
例如你的字体文件是heiti.ttf
那么上面的
fontname全都要改为heiti