工作的时候,用户可能不喜欢浏览器默认的字体,想要选用其它的字体,这时候我们如何去完成这个需求呢?

解决这个需求我们需要使用两个内容:

1.css中的@font-face属性

2.客户需要的字体文件

css代码如下:

@font-face {
  font-family: "Aa厚底黑";/*这个是字体文件的名字,不要把.ttf加在这里*/
  src: url('./assets/font/Aa厚底黑.ttf') format("truetype");
  /*url表示你本地的字体文件的路径*/
 /*如果你的字体文件是以.otf结尾的,format请使用("opentype"),可以在网上查找对应的关键字*/
}

然后给你需要的内容添加上样式

.h1{
  font-family: "Aa厚底黑";
  font-size: 36px;
}

效果图如下

 

 

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐