在网页中引入特殊字体

网页使用的字体需要受制于操作系统,如果用户的操作系统没有安装某个字体,网页则会退而求其次的使用系统自带的字体。

因此我们并不能随便使用一些好看的字体,只能选用一些安全字体。比如:Helvetica,Arial,宋体,微软雅黑。

如何在网页中加载特殊字体?

1、在百度搜索想要加载的字体库,下载下来转换成.ttf格式。(一般直接下载下来的字体都是 .ttf 格式)

2、在网页源码中引入字体代码如下:

<style>
@font-face
{
font-family: my;
src: url('./fonts/long.ttf'); /* IE9+ */
}
.abc
{
font-family:my;
width:100px;
height:100px;
background:yellow;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
.abc:hover
{
width:300px;
}
</style>
<div class="abc">
有些文字不支持!
</div>

3、显示的效果

字体加载

滚动至顶部