图文字体的使用

最新推荐文章于 2021-08-03 21:24:59 发布

原创最新推荐文章于 2021-08-03 21:24:59 发布 · 299 阅读

0 ·

CC 4.0 BY-SA版权

web 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍如何从网络下载字体并将其应用到HTML页面中，通过定义CSS样式和使用@font-face规则，实现自定义字体的加载与显示。同时，展示了如何通过编码设置特定的文字图标。

1.从网上下载字体

2.在html页面中定义字体，并设置css样式引用字体

<html>
<head>
    <tile>sdfadfa</title>
    <style type="text/css">
@font-face {
    font-family: 'FontAwesome-v5';
    src:
        url('fontawesome-webfont.eot');
    src: url('fontawesome-webfont.eot')
        format('embedded-opentype'),
        url('fontawesome-webfont.woff2')
        format('woff2'),
        url('fontawesome-webfont.woff')
        format('woff'),
        url('fontawesome-webfont.ttf')
        format('truetype'),
        url('fontawesome-webfont.svg')
        format('svg');
    font-weight: normal;
    font-style: normal;
}

.icon {font-family:'FontAwesome-v5' ;}

.fa-hands-helping:before {
    content: "\f4c4" !important;   //编码
}
</style>

</head>
<ul>
<li><div title="帮助" class="icon fa-hands-helping"></div></li>
</ul>

content: "\f4c4" !important; //编码这个是文字图片的编码，如下