网站前端教程

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

网站前端教程 51源码 2023-01-06 人阅读

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

1、字体选择

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

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

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

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

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

相关信息

设计师必备-360查字体在线检查本地字体是否能商用
在线工具

360查字体由360官方出品的在线查询字体是否可商用的工具,主要功能是检查本地已经安装的字体,哪些可以商用,哪些需要购买,避免侵权纠纷。另外还可以搜索字体名称来查询...

2、字体转换

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

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

相关信息

免费商用字体下载大全网站
在线工具

分享一个免费商用字体下载大全网站,目前共244款字体可以免费商用字体提供下载,还在不断更新。大家以后就不需要到处一个个找了,直接都是打包下载。最近新增: 站酷仓耳...

找到了合适的字体,我们还需要把字体转换成网页可以使用的格式,直接用下面的工具。

相关信息

分享两款国外在线免费字体转换网站
在线工具

工具介绍很久之前我的站长站分享过一款在线字体转换工具,访问量非常高,今天使用发现竟然收费了,网上找了一圈,发现国内的字体转换网站都要钱。于是谷歌找了下,发现了两...

使用方法:直接上传刚刚下载的字体,转换后,保存到项目目录,等待引用。

3、字体引用

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

@font-face {
  font-family: "11px"; 
  src: url('https://www.51yma.cn/fonts.woff2') format('woff2'),
       url('https://www.51yma.cn/fonts.woff') format('woff'),
       url('https://www.51yma.cn/fonts.ttf') format('truetype');
}

最后使用字体方法

body{
        font-family: "11px";
}
版权声明:文章搜集于网络,如有侵权请联系本站,转载请说明出处:https://www.51yma.cn/jiaocheng/wwebqianduanjiaocheng/1010.html
文章来源:
标签 前端开发 字体