嵌入字体@font-face

@font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。

语法：

@font-face {

    font-family : 字体名称;

    src : 字体文件在服务器上的相对或绝对路径;

}

这样设置之后，就可以像使用普通字体一样在（font-*）中设置字体样式。

比如：

p {

    font-size :12px;

    font-family : "My Font";

    /*必须项，设置@font-face中font-family同样的值*/

}




<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>嵌入字体</title>

<style type="text/css">

@font-face {

font-family: "MOOC Font";

src: url("http://www.imooc.com/Amaranth-BoldItalic.otf");

}

.demo {

width: 340px;

padding: 30px;

color: #566F89;

background: #000;

font-size:58px;

font-family: "MOOC Font";

}

</style>

</head>

<body>

<div class="demo">IMOOC</div>

</body>

</html>






												


											
嵌入字体@font-face的更多相关文章
	

    
								
  1. 【CSS3】---嵌入字体@font-face
		
    @font-face能够加载服务器端的字体文件,让浏览器端可以显示用户电脑里没有安装的字体. 语法: @font-face { font-family : 字体名称; src : 字体文件在服务器上的 ...
    
		
    2. 
						
  2. R - 变化plot字形，嵌入字体以pdf
		
    近期使用R绘图遇到两个问题 1. 使用不同的字体 2. 保存 plot 至 pdf 当字体嵌入pdf (embed the font) 使用extrafont和Ghostscript能够解决这两个问题 ...
    
		
    3. 
						
  3. as3.0 嵌入字体的用法
		
    var txt:TextField = new TextField();//创建文本 txt.embedFonts=true;//确定嵌入字体 var font:Font=new MyFont();/ ...
    
		
    4. 
						
  4. [ActionScript 3.0]  使用Embed在类中嵌入字体
		
    package { import flash.display.Sprite; import flash.text.Font; import flash.text.TextField; import f ...
    
		
    5. 
						
  5. [ActionScript 3.0] 嵌入字体
		
    首先我们要生成一个swf的字体库,以微软雅黑为例,新建YaHei_font.fla,ctrl+L,在库面板中右键→新建字型,弹出字体元件属性窗口,选择要嵌入的字体, 并选择为ActionScript  ...
    
		
    6. 
						
  6. W3School-CSS 字体(font)实例
		
    CSS 字体(font)实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 CSS 内边距  ...
    
		
    7. 
						
  7. Android Studio 3.1.2  修改字体(font)大小(size) 及老版本修改主题、字体、颜色 参照地址
		
    Android Studio 3.1.2  修改字体(font)大小(size) 步骤:File-Settings-Editor-Color Scheme-Color Scheme Font-Size ...
    
		
    8. 
						
  8. CSS 字体(font)实例
		
    CSS 字体(font)实例CSS 字体属性定义文本的字体系列.大小.加粗.风格(如斜体)和变形(如小型大写字母).CSS 字体系列在 CSS 中,有两种不同类型的字体系列名称: 通用字体系列 - 拥 ...
    
		
    9. 
						
  9. 利用CSS的@font-face属性 在网页中嵌入字体
		
    字体使用是网页设计中不可或缺的一部分.网页是文字的载体,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的时候就有可能看不到真实的设计. 美工设计师最常做的办 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 1.6Linux设备驱动
			
    1.设备驱动的作用: 计算机系统的运行是软硬件共同作用的结果.如果应用程序直接访问硬件,会造成应用程序与硬件耦合度过高(了解面向对象的读者会很容易想到,降低对象与对象之间的耦合度最有效的方法是通过接口 ...
    
			
    2. 
						
  2. Android WebRTC 音视频开发总结（二）-- webrtcdemo介绍
			
    这节主要介绍WebRTCDemo的结构,以此来简单了解WebRTC的调用流程,转载请说明出处(博客园RTC.Blacker) 1.先看WebRTCDemo的代码结构,如下图: 2.WebRTCDemo ...
    
			
    3. 
						
  3. WinForm中使用AnyCAD三维控件 の 初始化
			
    在WinForm中可以方便的集成AnyCAD.Net三维控件,只需要以下几部即可完成. 一.添加DLL程序集 AnyCAD.Foundation.Net.dll AnyCAD.Presentation ...
    
			
    4. 
						
  4. ADO.NET数据库
			
    ASP.NET提供了ADO.NET技术,它是ASP.NET应用程序与数据库进行交互的一种技术. ADO.NET技术把对数据库的操作分为几个步骤,并为每个步骤提供对象来封装操作过程,从而使对数据库的操作 ...
    
			
    5. 
						
  5. 用AsyncTask 来实现下载图片在android开发中
			
    Android使用AsyncTask 有如下好处: 1. 线程的开销较大,如果每个任务都要创建一个线程,那么应用程序的效率要低很多: 2. 线程无法管理,匿名线程创建并启动后就不受程序的控制了,如果有 ...
    
			
    6. 
						
  6. Retrieve Only First x Rows
			
    From time to time you may have the need to grab the top X number of rows returned from a table. For  ...
    
			
    7. 
						
  7. Delete PeopleSoft Query From the Database
			
    There could be different reasons why a PeopleSoft developer would like to delete a query from the da ...
    
			
    8. 
						
  8. habse的CopyTable
			
    需求:对hbase的一张表进行拷贝 一.table1的内容如下 hbase(main)::> scan 'table1' ROW COLUMN+CELL column=f1:age, times ...
    
			
    9. 
						
  9. nginx+php与apache+php性能对比
			
    测试工具http_load相同的动态页面测试,相同的硬件资源,相同并发,相同请求数量的前提下,nginx+php比apache+php的性能要 差,而且如果请求的压力大于硬件资源的承受能力,nginx ...
    
			
    10. 
						
  10. while循环中不支持循环使用curl
			
    <?php $link = mysql_connect('localhost', 'sms', 'sms'); mysql_select_db('sms', $link); mysql_quer ...
    
			
    11.