详解如何在css中引入自定义字体(font-face)


Posted in HTML / CSS onMay 17, 2018

为啥要用这个,要从做海报说起,那是一个风雨交加的夜晚。。。

好了不扯淡了,我们言归正传,为啥用他,因为浏览器没有字体呗。

那为啥要你告诉呢?我自己不会去w3cschool去看去学啊。是可以,但是我给你提供不是更快捷简便嘛

如何使用

@font-face{
     font-family: '字体名称随便起'; 
     src: url('../font/字体名称.eot');
     src:url('../font/字体名称.woff') format('woff'),
         url('../font/字体名称.ttf') format('truetype'),
         url('../font/字体名称.svg') format('svg');
}

//html中的代码中加一个h1或者其他的,里面写你自己想要的特殊文字

h1{font-size:36px; color:#ccc;font-family: "字体名称随便起";}

到这里就结束了感谢大家的观看(哎,能不能别扔鸡蛋破白菜的,我接着说接着说);

1、在哪里可以找到字体这个是关键,我会用但是没用字体还是然并卵啊。。

字体下载:https://3water.com/fonts/

这里可以找到一般我们系统中支持的字体下载后放到font文件夹中即可(font文件夹与css和images平级即可)

2、下载后的字体太大,这样就失去了性能性能性能(要不说事儿还不少)

解决方案:字蛛(可将字体需要的部分提取出来,一般也就几k,这样可以了吧)

字蛛官网:http://font-spider.org/

1)想要用到字蛛首先要安装node 或者有 git 也可以,作为前端这个没问题;

2)安装好之后就开始字蛛的安装,用命令行或git复制这句:npm install font-spider -g 你用淘宝镜像也行

3)漫长的等待,安装好后我们可以先检测下font-spider -V 看到出现版本号证明你已经安装成功,Nice。

4)记得把你下载好的好多兆的字体先放到我们刚才说的font文件夹中。

5)新建一个CSS样式表,定义字体,把下面的复制进去,输入你刚刚在font里命名的字体名称,这样字体的各种格式都定义好了。

@font-face{
     font-family: '字体名称随便起'; 
     src: url('../font/字体名称.eot');
     src:url('../font/字体名称.woff') format('woff'),
         url('../font/字体名称.ttf') format('truetype'),
         url('../font/字体名称.svg') format('svg');
}

//html中的代码中加一个h1或者其他的,里面写你自己想要的特殊文字

h1{font-size:36px; color:#ccc;font-family: "字体名称随便起";}

6)关键一步,就是生成自己需要的缩略字了,在git或node中输入font-spider+空格+路径 :font-spider ./demo/*.html

比如:

如果切盘在根目录可以直接 font-spider demo.html

font-spider C:\Users\13246\Desktop\cropper\demo.html

当然我这是演示具体还是看你电脑的路径哦。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
纯CSS3实现绘制各种图形实现代码详细整理
Dec 26 HTML / CSS
一款纯css3实现的颜色渐变按钮的代码教程
Nov 12 HTML / CSS
魔幻般冒泡背景的CSS3按钮动画
Feb 27 HTML / CSS
CSS3实现点击放大的动画实例代码
Feb 27 HTML / CSS
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
Sep 15 HTML / CSS
详解CSS3 rem(设置字体大小) 教程
Nov 21 HTML / CSS
关于 HTML5 的七个传说小结
Apr 12 HTML / CSS
HTML5 Notification(桌面提醒)功能使用实例
Mar 17 HTML / CSS
Html5实现文件异步上传功能
May 19 HTML / CSS
Html5移动端div固定到底部实现底部导航条的几种方式
Mar 09 HTML / CSS
CSS完成视差滚动效果
Apr 27 HTML / CSS
bootstrapv4轮播图去除两侧阴影及线框的方法
Feb 15 HTML / CSS
CSS3实现多样的边框效果
May 04 #HTML / CSS
纯css3制作煽动翅膀的蝴蝶的示例
Apr 23 #HTML / CSS
CSS3使用transition属性实现过渡效果
Apr 18 #HTML / CSS
CSS3 二级导航菜单的制作的示例
Apr 02 #HTML / CSS
CSS3实现全景图特效示例代码
Mar 26 #HTML / CSS
css3新单位vw、vh的使用教程
Mar 23 #HTML / CSS
巧用CSS3的calc()宽度计算做响应模式布局的方法
Mar 22 #HTML / CSS
You might like
php数组的概述及分类与声明代码演示
2013/02/26 PHP
php解析html类库simple_html_dom(详细介绍)
2013/07/05 PHP
二进制交叉权限微型php类分享
2014/02/07 PHP
PHP内核探索:哈希表碰撞攻击原理
2015/07/31 PHP
PHP getallheaders无法获取自定义头(headers)的问题
2016/03/23 PHP
EditPlus注册码生成器(js代码实现)
2013/03/25 Javascript
jQuery中 prop() attr()使用详解
2015/05/19 Javascript
表单验证正则表达式实例代码详解
2015/11/09 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
2015/11/18 Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
2015/12/03 Javascript
浅谈JavaScript 标准对象
2016/06/02 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
2016/10/10 Javascript
jquery select插件异步实时搜索实例代码
2017/10/20 jQuery
Node.js实现批量下载图片简单操作示例
2020/01/18 Javascript
[06:14]《辉夜杯》外卡赛附加赛 4支战队巡礼
2015/10/23 DOTA
pyqt4教程之实现半透明的天气预报界面示例
2014/03/02 Python
通过实例浅析Python对比C语言的编程思想差异
2015/08/30 Python
Python自动发送邮件的方法实例总结
2018/12/08 Python
使用python实现抓取腾讯视频所有电影的爬虫
2019/04/15 Python
详解python数据结构和算法
2019/04/18 Python
Html5页面中的返回实现的方法
2018/02/26 HTML / CSS
英国足球店:UK Soccer Shop
2017/11/19 全球购物
集世界奢侈品和设计师品牌的意大利精品买手店:Tessabit
2019/08/17 全球购物
医学毕业生自荐信
2013/10/11 职场文书
科室工作的个人自我评价
2013/10/30 职场文书
安卓程序员求职信
2014/02/28 职场文书
2014年幼儿园植树节活动方案
2014/03/02 职场文书
铣床操作工岗位职责
2014/06/13 职场文书
运动与健康自我评价
2015/03/09 职场文书
紧急通知
2015/04/17 职场文书
教师考核鉴定意见
2015/06/05 职场文书
地雷战观后感
2015/06/09 职场文书
党校团干班培训心得体会
2016/01/06 职场文书
python中的None与NULL用法说明
2021/05/25 Python
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技