嵌入字体@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. 判断jquery是否已经加载，如果没有动态加载
			
    方法一: // Only do anything if jQuery isn't defined if (typeof jQuery == 'undefined') { if (typeof $ == ...
    
			
    2. 
						
  2. ASP.NET MVC5 入门
			
    参考资料<ASP.NET MVC5 高级编程>第5版 第1章 入门 1.1 ASP.NET MVC 简介 ASP.NET MVC是一种构建Web 应用程序的框架,它将一般的MVC(Mode ...
    
			
    3. 
						
  3. jquery 仿手机屏幕切换界面效果
			
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
    
			
    4. 
						
  4. Unable to write inside TEMP environment path
			
    安装PostgreSQL 9:Unable to write inside TEMP environment path 注册表:regedit HKEY_CLASSES_ROOT\.vbs,设置默认为 ...
    
			
    5. 
						
  5. Copying Fields to a new Record
			
    This is a time saving tip for application designer. If you are creating a new record definition and  ...
    
			
    6. 
						
  6. PHPExcel操作sae的storage上的文件
			
    在用PHPexcel操作excel的时候,在本地是好使的,但是把代码部署到sae就不好使了.会遇到如下问题: 文件的操作被拒绝. 这个原因就是sae上的应用文件是不允许改动的.sae提供的文件方案是使 ...
    
			
    7. 
						
  7. 《第一行代码--Android》阅读笔记之数据持久化
			
    1.升级数据库 为了避免手工清空数据(或卸载重装APP),重写SQLiteOpenHelper里面的onUpgrade()方法   引用自http://blog.csdn.net/longvslove ...
    
			
    8. 
						
  8. Yii 操作提示框实现
			
    如图: html  +  css   代码: 这是 YII  模板的写法 欢迎使用Yii <style> div.success{ background: #C5FBBD; border: ...
    
			
    9. 
						
  9. mybatis使用笔记
			
    关于动态SQL里的条件查询(if test): 1.lombok插件和mybatis插件在有些变量名下会冲突,比如一个变量为rType的字段,lombok插件认为应该是getRType,但是mybat ...
    
			
    10. 
						
  10. Nginx配置:http重定向，URLRewrite，一个简单框架的配置思路
			
    一个重定向的应用配置: server { listen       8000; server_name  localhost; root F:/home/projects/test; index    ...
    
			
    11.