网站怎么修改默认字体

同样的网站风格用不同的网站默认字体,也会有不同的感觉,今天2021年4月1日09:05:18写一篇关于修改网站默认字体的教程,供学习使用。

注意字体版权

首先,我们可以通过以下代码来引入字体文件

/* 定义字体 */
@font-face{
font-family: "字体名称";
src: url("./font/字体名称.otf");
}

其中font-family就是之后使用时候的字体名称了,如此一来CSS中就可以直接使用本地的字体了,如下:

font-family: "微软雅黑";

以下是一个简单的代码演示,实际效果见页底

HTML

<div class="box">
<div class="box-one">
<h3>字体:Barlow-Regular</h3>
举杯邀明月,对影成三人。
Raise a glass to invite the moon, and make three for the shadow.
</div>
<div class="box-two">
<h3>字体:butler-bold</h3>
举杯邀明月,对影成三人。
Raise a glass to invite the moon, and make three for the shadow.
</div>
<div class="box-three">
<h3>字体:微软雅黑</h3>
举杯邀明月,对影成三人。
Raise a glass to invite the moon, and make three for the shadow.
</div>
<div class="box-fore">
<h3>字体:方正大黑简体</h3>
举杯邀明月,对影成三人。
Raise a glass to invite the moon, and make three for the shadow.
</div>
<h3>字体:无</h3>
举杯邀明月,对影成三人。
Raise a glass to invite the moon, and make three for the shadow.
</div>

CSS

/*
*引入字体
*/
@font-face{
font-family: "Barlow-Regular";
src: url("./font/Barlow-Regular.ttf");
}
@font-face{
font-family: "butler-bold";
src: url("./font/butler-bold.ttf");
}
@font-face{
font-family: "微软雅黑";
src: url("./font/微软雅黑.otf");
}
@font-face{
font-family: "方正大黑简体";
src: url("./font/方正大黑简体.ttf");
}
/*
*第一个盒子
*/
.box-one {
font-family: "Barlow-Regular";
}
.box-two {
font-family: "butler-bold";
}
.box-three {
font-family: "微软雅黑";
}
.box-fore {
font-family: "方正大黑简体";
}

当然,在实际运用中当然没这么简单,在真实的环境中一般是这样的:





@font-face{
font-family:Avenir Next;
src:url(../fonts/avenir-next/avenir-next-regular.eot);
src:url(../fonts/avenir-next/avenir-next-regular.eot?#iefix) format("embedded-opentype"),
url(../fonts/avenir-next/avenir-next-regular.woff2) format("woff2"),
url(../fonts/avenir-next/avenir-next-regular.woff) format("woff"),
url(../fonts/avenir-next/avenir-next-regular.ttf) format("truetype"),
url(../fonts/avenir-next/avenir-next-regular.svg#svgFontName) format("svg");
font-weight:400;
font-style:normal;
}

虽然都是字体文件,但是不同的格式在不同的环境下都有他独特的作用。

人已赞赏

相关文章

网站建设

自定义字段使用教程

2021-3-30 18:19:11

网站建设

小程序文章详情页空白问题解决方案

2021-4-13 11:53:12

0 条回复 A文章作者
    暂无讨论,说说你的看法吧

解锁会员资源

开通会员

解锁海量优质VIP资源

立即开通

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索