原文摘自：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. 
						
  2. css3 自定义字体_使用@font-face方式实现个性化字体
		
    当我们在浏览一些网站时发现,里面含有一些十分个性的字体,这些字体并不是我们电脑上安装的字体.那么css是如何实现自定义字体的呢? 资源网站大全https://55wd.com 在css3中可以通过@f ...
    
		
    3. 
						
  3. css3 自定义字体 @font-face
		
    CSS3 @font-face 规则 在 CSS3 之前,web 设计师必须使用已在用户计算机上安装好的字体. 通过 CSS3,web 设计师可以使用他们喜欢的任意字体. 当您您找到或购买到希望使用的 ...
    
		
    4. 
						
  4. CSS学习笔记----CSS3自定义字体图标
		
    响应式网页字体图标 作者:大漠 日期:2014-01-28 点击:3220 @font-face Responsive 本文由大漠根据Jason的<Responsive Webfont Icon ...
    
		
    5. 
								
  5. CSS3 使用自定义字体
		
    CSS3 @font-face 规则 在 CSS3 之前,web 设计师必须使用已在用户计算机上安装好的字体.通过 CSS3,web 设计师可以使用他们喜欢的任意字体.当您您找到或购买到希望使用的字体 ...
    
		
    6. 
						
  6. css3之自定义字体
		
    使用@font-face自定义字体 我们在浏览国外的一些个人网站时,总是可以发现一些非常个性的字体,比如
    
		
    7. 
						
  7. CSS3的自定义字体@font-face:将图片ICON转为字体
		
    大家都知道现在各个浏览器都支持CSS3的自定义字体(@font-face),包括IE6都支持,只是各自对字体文件格式的支持不太一样.那么对于网站中用到的各种icon,我们就可以尝试使用font来实现, ...
    
		
    8. 
						
  8. css3中的自定义字体
		
    自定义字体 /*定义*/ @font-face { font-family: "icons"; src: url("icomoon.eot"); src: lo ...
    
		
    9. 
						
  9. 使用自定义字体  @font-face 小试
		
    第一次了解到@font-face是小伙伴给我展示的功能  感觉奇妙的不得了    @font-face 是CSS3中的一个模块  使用它你就可以将你自定义的web字体 去实现一些奇妙的想法 首先先介绍 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. FactoryBean的实现原理与作用
			
    FactoryBean与BeanFactory: 这俩货在拼写上很是相似,很多同学在看IOC源码或者其他地方并不能分清有啥区别,前面的IOC源码中我简单说过,现在统一简单来讲一下: FactoryBe ...
    
			
    2. 
						
  2. spring AOP 代理（静态与动态+使用cglib实现）
			
    一.没有代理模式 缺点: 1.工作量特别大,如果项目中有多个类,多个方法,则要修改多次. 2.违背了设计原则:开闭原则(OCP),对扩展开放,对修改关闭,而为了增加功能把每个方法都修改了,也不便于维护 ...
    
			
    3. 
						
  3. HDU 1735  字数统计(模拟+一点点贪心的思想）
			
    题目戳我 字数统计 Time Limit: 1000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...
    
			
    4. 
						
  4. UITableViewCell在重用ID时为何加上Static关键字
			
    UITableViewCell在重用ID时为何加上Static关键字 先回顾一下iOS各种变量作用域和生命周期相关知识: 1.方法中临时变量存储在栈区,出了该方法,临时变量会被自动销毁.但是如果给方法 ...
    
			
    5. 
						
  5. Swift_属性
			
    Swift_属性 点击查看源码 class DataImporter { var fileName = "data.txt" init() { print("初始化&qu ...
    
			
    6. 
						
  6. GPUImage源码解读之GPUImageFramebuffer
			
    简介 OpenGL ES的FrameBuffer是渲染发生的地方,普通的2D图形的渲染默认发生在屏幕上:而三维的图形渲染则除了包括像素点的颜色,还有Depth Buffer,Stencil Buffe ...
    
			
    7. 
						
  7. C++分享笔记：5X5单词字谜游戏设计
			
    笔者在大学二年级刚学完C++程序设计后,做过一次课程设计,题目是:5X5单词字谜游戏设计.为了设计算法并编写程序,笔者在当时颇费了一番心力,最后还是成功地完成了.设计中不乏有精妙之处.该程序设计完全是 ...
    
			
    8. 
						
  8. Yii2之发送电子邮件
			
    官方文档:http://www.yiiframework.com/doc-2.0/guide-tutorial-mailing.html 使用Yii2框架的时候,有时候需要发送电子邮件,Yiii2提供 ...
    
			
    9. 
						
  9. python函数中闭包的概念说明
			
    函数中闭包的概念说明 闭包: 内层函数对外层函数非全局变量的引用,就叫做闭包 判断闭包方法 ._closure_ : 执行后返回有效信息就是闭包,返回none就不是闭包 举例1: 是闭包 def wr ...
    
			
    10. 
						
  10. Webstorm新建vue类型文件设置
			
    今天安装了Node.js,配置了vue需要的框架,发现原有的wenstorm新建文件的时候没有vue文件选项,因此,学习了一下webstorm如何配置创建vue文件 具体过程如下: 第一步,打开web ...
    
			
    11.