原文摘自:https://www.cnblogs.com/moqiutao/archive/2015/12/23/5070463.html

总节:

1) 定义字体标准格式:

 @font-face {
font-family: 'YourWebFontName';
src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
url('YourWebFontName.ttf') format('truetype'), /* Safari, Android, iOS */
url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */ [font-weight: <weight>];
[font-style: <style>];
} 

YourWebFontName : 字体名称
url('YourWebFontName.eot') 字体在服务器上的相对路径或绝对路径
要求尽可能的上传ttf、eot、woff、svg字体,并显示表明相应格式,比如: format('embedded-opentype')
还可以字体字体描述,比如是否是粗体: font-weight 等,但不是必须的。

2)字体转换网址:
https://www.fontke.com/tool/convfont/

3)演示代码:

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style>
/* 定义 卡布奇诺美瞳简体 */
@font-face {
font-family: "卡布奇诺美瞳简体";
src: url("锐字工房卡布奇诺美瞳简1.0.eot"); /* IE9 Compat Modes */
src: url("锐字工房卡布奇诺美瞳简1.0.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
url("锐字工房卡布奇诺美瞳简1.0.woff") format("woff"), /* Modern Browsers */
url("锐字工房卡布奇诺美瞳简1.0.ttf") format("truetype"), /* Safari, Android, iOS */
url("锐字工房卡布奇诺美瞳简1.0.svg#YourWebFontName") format("svg"); /* Legacy iOS */
} /* 应用字体 */
div {
font-family: "卡布奇诺美瞳简体", "Arial Black", Gadget, sans-serif;
font-size:40px; /* 字体太小,使其变大*/
font-weight:bold;
color:#06C;
}
</style>
</head> <body>
<div class="tip">Hello World!</div>
</body>
</html>

演示网址:http://www.wangshen.net/learn/css3/demo/font-face/ ,第一次打开有点慢,因为中文字体库一般都比较大。

演示下载:http://www.wangshen.net/learn/css3/demo/font-face/font-face.rar

CSS3自定义字体的更多相关文章

  1. css3 自定义字体的使用方法

    @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许 ...

  2. css3 自定义字体_使用@font-face方式实现个性化字体

    当我们在浏览一些网站时发现,里面含有一些十分个性的字体,这些字体并不是我们电脑上安装的字体.那么css是如何实现自定义字体的呢? 资源网站大全https://55wd.com 在css3中可以通过@f ...

  3. css3 自定义字体 @font-face

    CSS3 @font-face 规则 在 CSS3 之前,web 设计师必须使用已在用户计算机上安装好的字体. 通过 CSS3,web 设计师可以使用他们喜欢的任意字体. 当您您找到或购买到希望使用的 ...

  4. CSS学习笔记----CSS3自定义字体图标

    响应式网页字体图标 作者:大漠 日期:2014-01-28 点击:3220 @font-face Responsive 本文由大漠根据Jason的<Responsive Webfont Icon ...

  5. CSS3 使用自定义字体

    CSS3 @font-face 规则 在 CSS3 之前,web 设计师必须使用已在用户计算机上安装好的字体.通过 CSS3,web 设计师可以使用他们喜欢的任意字体.当您您找到或购买到希望使用的字体 ...

  6. css3之自定义字体

    使用@font-face自定义字体 我们在浏览国外的一些个人网站时,总是可以发现一些非常个性的字体,比如

  7. CSS3的自定义字体@font-face:将图片ICON转为字体

    大家都知道现在各个浏览器都支持CSS3的自定义字体(@font-face),包括IE6都支持,只是各自对字体文件格式的支持不太一样.那么对于网站中用到的各种icon,我们就可以尝试使用font来实现, ...

  8. css3中的自定义字体

    自定义字体 /*定义*/ @font-face { font-family: "icons"; src: url("icomoon.eot"); src: lo ...

  9. 使用自定义字体 @font-face 小试

    第一次了解到@font-face是小伙伴给我展示的功能  感觉奇妙的不得了    @font-face 是CSS3中的一个模块  使用它你就可以将你自定义的web字体 去实现一些奇妙的想法 首先先介绍 ...

随机推荐

  1. [转]:理解 Linux 配置文件

    简介: 本文说明了 Linux 系统的配置文件,在多用户.多任务环境中,配置文件控制用户权限.系统应用程序.守护进程.服务和其它管理任务.这些任务包括管理用户帐号.分配磁盘配 额.管理电子邮件和新闻组 ...

  2. bootstrap-table页码ALL显示为NAN

    在github上查阅找到的解决办法: https://github.com/wenzhixin/bootstrap-table/issues/435 页面部分: data-page-list=&quo ...

  3. react系列(六)Redux Saga

    在Redux中常要管理异步操作,目前社区流行的有Redux-Saga.Redux-thunk等.在管理复杂应用时,推荐使用Redux-Saga,它提供了用 generator 书写类同步代码的能力. ...

  4. UIView常用的一些方法setNeedsDisplay和setNeedsLayout

    1,UIView的setNeedsDisplay和setNeedsLayout方法 首先两个方法都是异步执行的.而setNeedsDisplay会调用自动调用drawRect方法,这样可以拿到  UI ...

  5. mysql小特性:change buffer

    change buffer是在其他数据库中没有的一个概念,说白了就是一块系统表空间分配的空间,针对的对象是辅助索引的叶子节点(为什么不是主键索引?因为主键索引是聚集索引,在磁盘上的排列是有序的,磁盘的 ...

  6. window.moveTo(),window.moveBy()不生效

    window.moveTo()和window.moveBy的菜鸟教程介绍: moveTo() 方法可把窗口的左上角移动到一个指定的坐标. window.moveTo(x,y) moveBy() 方法可 ...

  7. 记一次PHP实现接收邮件信息(我这里测试的腾讯企业邮件)

    PHP实现接收邮件信息(我这里测试的腾讯企业邮件) , 其他的类型的没有测,应该只要更换pop3地址 端口号就可以. 代码如下(代码参考网络分享): <?php //此处查看链接状态 heade ...

  8. kali aquatone安装

    https://www.jianshu.com/p/418eedb9d9c8

  9. python爬xx图代码

    今日 好热,照样是挖洞挖不到,看了几天的python爬虫,学会了xpath解析 撸一个代码玩玩] 不要说什么,优化之类的,刚学完,跑了一阵 ,还可以  挺稳定 # -*- coding:utf-8 - ...

  10. Go语言中的流程控制

    1 概述 Go语言提供了条件分支 if,状态分支 switch,循环 for,跳转 goto,延迟执行 defer,这些流程控制语句.分别作说明如下: 2 条件分支 if 依据条件是否满足确定执行哪个 ...