如何引进外部字体文件。

本文探讨了前端开发中使用特殊字体的方法,包括引入外部字体文件的两种常见方式:作为图片处理和直接引用字体文件。文章详细介绍了如何通过@font-face规则在CSS中引入自定义字体,并提供了具体的代码示例。此外,还提到了字体文件过大的问题及解决方法。

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

有时候UI为了界面好看,内容丰富,常常会使用一些特殊字体来修饰页面。那我们前端还原时一般就有两个做法,一是把它当做图片处理,二是引入外部字体文件。第一种做法不易于前端人员修改,还有一个就是涉及到版权问题,这是我网上随便找的文章《你造吗?微软雅黑字体使用也是有版权的》,今天就来说说如何引进外部字体文件。
html

<p class="one">今天不用上学啦</p>
<p class="two">今天不用上学啦</p>
<p class="three">今天不用上学啦</p>

css

@font-face {
        font-family:'aa';
    src:url('font/amjt.ttf');
}
@font-face {
    font-family:'bb';
    src:url('font/mct.ttf');
}
@font-face {
    font-family:'cc';
    src:url('font/TTENuoJ_0.ttf');
}
.one{font-size: 30px;color: #ccc;font-family: 'aa';}
.two{font-size: 30px;color: #ccc;font-family: 'bb';}
.three{font-size: 30px;color: #ccc;font-family: 'cc';}

文件目录
1201661-20171019233733318-1205687385.png
效果图
1201661-20171019234728974-416624715.png
但是引入外部字体文件有个缺点就是字体文件过大。先要减少字体文件的大小可以看《如何给引入的文字文件瘦身》

转载于:https://www.cnblogs.com/heixingxing/p/7679524.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值