在线引入字体html,字体图标引入到HTML---复制用代码

第一步：在样式里面声明字体：告诉别人我们自己定义的字体

ps:

font-family的名字可以自己起

src是引入了4种字体，不用修改的

1 @font-face {

2 font-family: 'icomoon';

3 src: url('fonts/icomoon.eot?7kkyc2');

4 src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),

5 url('fonts/icomoon.ttf?7kkyc2') format('truetype'),

6 url('fonts/icomoon.woff?7kkyc2') format('woff'),

7 url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');

8 font-weight: normal;

9 font-style: normal;

10 }

第二步：给盒子使用字体

span {

font-family: "icomoon";

}

第三步：盒子里面添加结构



或者

span::before {

content: "\e900";

}

标签：7kkyc2,icomoon,url,format,fonts,HTML,字体,font,图标

来源： https://www.cnblogs.com/jane-panyiyun/p/11818310.html

在线引入字体html,字体图标引入到HTML---复制用代码相关推荐

html引入微软雅黑,网页引入特殊字体的几种方案
网页使用的字体需要受制于操作系统,如果用户的操作系统没有安装某个字体,网页则会退而求其次的使用系统自带的字体. 因此我们并不能随便使用一些好看的字体,只能选用一些安全字体.比如:Helvetica,A ...
css3如何链如外部字体,微信小程序引入外部字体总结（针对安卓加载缓慢问题）...
最近有个项目需求,须要改变小程序全部文字的字体. 查了资料后发现,本地加载字体文件致使小程序太大.动态加载文件,苹果然机完美,可是在安卓的真机上引入的外部字体加载会很慢,会有很明显的默认字体切换到外部 ...
CSS-基础选择器、字体文本属性、引入方式
CSS简介 CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称,有时我们也会称之为 CSS 样式表或级联样式表. CSS 是也是一种标记语言:主要用于设置 HTML 页 ...
CSS3中引入多种自定义字体（font-face）
今天在HTML中发现了一个问题,提供给我们默认的字体有很多,但是除了那些"黑体"."宋体"."楷体"等支持中文字体之外,其余的都不知道中文字 ...
前端项目，引入苹方字体
UI用的IMac,设计图默认使用的字体为 pingFangSC-Regular 与UI协商后,决定在项目里引入本地的字体库以达到与设计图同样的效果首先下载font字体库这里下载的是ttf文件(并 ...
html字体文件太大,引入第三方字体体积太大的问题
背景在做营销活动的时候,设计稿这边使用了"思源"的字体.为了统一整个页面的字体风格,于是就把用到的字体引进来项目,但是最后发现字体大小竟然达到了 14MB,加载时间为3.74秒, ...
css中引入新的字体文件
css中引入新的字体文件 @font-face { font-family: 'fzltxhk'; src:url('fzltxhk.ttf') format('truetype') ...
为网站文字前面添加图标在线调用 Font Awesome 字体icon小图标美化网站
一.如何开始 1.将下面的代码复制粘贴到HTML页面面的 <head> 下面 <link rel="stylesheet" href="https:// ...
uniapp如何引入阿里云矢量图标库
最近搞了下uniapp的开发,写一下关于引入阿里云矢量图标库的方法: 首先说下我走过的坑吧,我直接把图标zip包下下来放在static里面,在App.vue的style中引入,保存,后面查了下,微信小 ...
计算机字体原理,字体图标生成原理（1）
浏览器根据font-family解析渲染为不同图形的过程: 1:读取文字内容转换成对应的 unicode码() 计算机操作系统里面每个字符都有一个unicode编码,比如我们在web上输入\u621 ...

在线引入字体html,字体图标引入到HTML---复制用代码

在线引入字体html,字体图标引入到HTML---复制用代码相关推荐

最新文章

热门文章