前端开发如何使用其他字体(图文)

admin
🌐 经济型:买域名、轻量云服务器、用途:游戏 网站等 《腾讯云》特点:特价机便宜 适合初学者用 点我优惠购买
🚀 拓展型:买域名、轻量云服务器、用途:游戏 网站等 《阿里云》特点:中档服务器便宜 域名备案事多 点我优惠购买
🛡️ 稳定型:买域名、轻量云服务器、用途:游戏 网站等 《西部数码》 特点:比上两家略贵但是稳定性超好事也少 点我优惠购买

温馨提示:这篇文章已超过526天没有更新,请注意相关的内容是否还可用!

我们经常看到别人的网站字体非常漂亮,那是因为他们使用了其他的美化字体,合理的使用字体可以让网站看上去,高端优雅。那么如何使用自己下载的字体,执刀人今天分享给大家整套方法。


1、字体选择

选择字体要注意两点,如果这两点不注意,会适得其反的。


一、大家都知道,字体文件都是几M甚至几十M,对于网站来说,属于非常大的了,用户在打开页面时,加载会非常慢,所以切记体积不过大。


二、注意字体版权,不要什么字体都拿来用,现在国内的字体商都不讲武德的,随意使用分分钟律师函赔钱。


前端开发如何使用其他字体(图文)


字体是否可以商用可以使用360的字体查询网站:

2、字体转换

推荐使用可以商用且体积小巧的字体,可以去我推荐的这个字体网站找找。


3、字体引用

用CSS3的@font-face语法,加载引用下载好的字体文件。

1
2
3
4
5
6
@font-face {
  font-family"11px"
  srcurl('httPs://www.wdzzz.com/fonts.woff2'format('woff2'),
       url('https://www.wdzzz.com/fonts.woff'format('woff'),
       url('https://www.wdzzz.com/fonts.ttf'format('truetype');
}

最后使用字体方法

1
2
3
body{
        font-family"11px";
}


文章版权声明:除非注明,否则均为执刀人的工具库原创文章,转载或复制请以超链接形式并注明出处。

发表评论

快捷回复: 表情:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog
验证码
评论列表 (暂无评论,224人围观)

还没有评论,来说两句吧...

目录[+]

取消
微信二维码
微信二维码
支付宝二维码