文档章节

WebFont-前端字体

Clover286
 Clover286
发布于 2017/04/27 16:10
字数 268
阅读 16
收藏 0

一.参考文献

1.http://www.cnblogs.com/yes-V-can/p/5716853.html

2.http://blog.csdn.net/zhouwangling_/article/details/53096649

二.使用方法

1.下载字体

网上百度自己要使用的字体,一般下载的是ttf格式,需要4种(或5)格式,其他的格式可以通过在线工具基于ttf转换

http://www.fontke.com/tool/convfont/(这个最好用)

web-fontmin(这个在线转换工具更好用,注意,左边编辑框里的字全删除再上传ttf,不然只会转换框里的那些字体)

在线格式转换点此(注:该网站我成功转过,有时候会报错,多试几次)

 

2.css加载

@font-face {
    font-family: "李旭科书法";
    src: url("../font/李旭科书法.eot"); /* IE9 */
    src: url("../font/李旭科书法.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../font/李旭科书法.woff") format("woff"), /* chrome, firefox */
    url("../font/李旭科书法.ttf") format("truetype"), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
    url("../font/李旭科书法.svg#李旭科书法") format("svg"); /* iOS 4.1- */
    font-style: normal;
    font-weight: normal;
}

3.使用:在需要使用该字体的地方用即可:

.class{
font-family:'李旭科书法'
}

 

© 著作权归作者所有

共有 人打赏支持
Clover286
粉丝 8
博文 199
码字总数 65713
作品 0
武汉
程序员
Web-Fontmin -- 在线提取你需要的字体

关于@font-face @font-face是CSS3中的一个模块,使用 @font-face 可以自定义网页字体,即使用户的电脑没有安装某种字体。怎么用 @font-face 呢?你可能见过类似下面的代码片段,它可以让 @f...

forsigner
2016/03/14
45
0
公共jquery库/常用前端公共库CDN服务推荐

一,360网站卫士常用前端公共库CDN服务 这里提供了由360网站卫士CDN驱动的常用前端公共库以及和谐使用Google公共库&字体库的调用方法 网址http://libs.useso.com/ 二,百度支持的JS,字体库列表...

越野小生
2016/07/22
16
0
关于css加载fontawesome字体在firefox中无效的问题

我在css中使用 @font-face { font-family: 'FontAwesome'; src: url(../font/fontawesome-webfont.woff) format("woff"), url(../font/fontawesome-webfont.eot) format("eot"), url(../fon......

张为
2014/01/29
2.9K
3
jquery、CSS、icon、字体、模板、CDN资源库汇总(庞大的前端干货)

jQuery(js)库: jQueryfuns:43,849 个HTML, CSS & 响应式模板 http://www.jqueryfuns.com/ datouwang 一个js特效库 http://www.datouwang.com/ js代码网 大量js和css效果代码分享 http:/......

找前辈网
2017/10/24
0
0
JavaScript 字体子集化方案--Fontmin

首款纯 JavaScript 字体子集化方案!Node模块,命令行,客户端全套支持,带你玩转 webfont !让中文字体流行起来!

junmer
2015/04/15
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

Delphi 常用API 函数(好多都没见过)

AdjustWindowRect 给定一种窗口样式,计算获得目标客户区矩形所需的窗口大小 AnyPopup 判断屏幕上是否存在任何弹出式窗口 ArrangeIconicWindows 排列一个父窗口的最小化子窗口 AttachThread...

dillonxiao
24分钟前
1
0
阿里云ubuntu配置Android开发环境编译Apk

1.命令行下载Android SDK $ wget https://dl.google.com/android/android-sdk_r24.4.1-linux.tgz $ tar zxvf android-sdk_r24.4.1-linux.tgz 2.列出可以现在的SDK ./android list sdk  -a 3......

SuShine
24分钟前
1
0
maven导出项目依赖的jar包

一、导出到默认目录 targed/dependency 从Maven项目中导出项目依赖的jar包:进入工程pom.xml 所在的目录下,执行如下命令: mvn dependency:copy-dependencies 二、导出到自定义目录中 在mav...

来来来来来
25分钟前
1
0
Win10下React Native环境安装教程及错误处理办法(实测)

https://blog.csdn.net/zhangatle/article/details/53289471 准备工作 注意:小米手机MIUI有坑,文末有解决方法 1 首先,你需要先安装Node.js并进行环境变量的配置,具体可以参考我的另一篇文...

james_laughing
25分钟前
1
0
IDEA2018 Mybatis plugin破解

IDEA2018 Mybatis plugin破解 Mybatis Plugin 一、Mybatis Plugin插件是什么 提供Mapper接口与配置文件中对应SQL的导航 编辑XML文件时自动补全 根据Mapper接口, 使用快捷键生成xml文件及SQL...

DemonsI
26分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部