嵌入字体@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. Unieap3.5-需要用到window.setTimeout的地方
			
    1.js大数据量操作且需要显示进度条 unieap.showLoading(true);//进度条 window.setTimeout(function(){ checkUtils.setAllRow ...
    
			
    2. 
						
  2. IIS7 配置URL_REWRITE
			
    webconfig 文件 system.webServer节点下配置rewrite 报错 是因为需要安装URL重写 需要安装: https://www.microsoft.com/zh-cn/down ...
    
			
    3. 
						
  3. C puzzles详解【38-45题】
			
    第三十八题 What is the bug in the following program? #include <stdlib.h> #include <stdio.h> # ...
    
			
    4. 
						
  4. 搭建高性能计算环境（一）、Linux操作系统的安装和配置
			
    一般课题组刚开始做计算,往往没有专门的集群,主要用自己的PC机.工作站或者买几台服务器来跑跑:小伙伴们摸索Linux的使用.编译一些开源软件.甚至写点Shell脚本需要耗费很多时间,耽搁了读文献.码论 ...
    
			
    5. 
						
  5. Winform开发常用控件之Checkbox和CheckedListBox
			
    Winform的开发基本都是基于控件事件的,也就是事件驱动型的. 多选框的放置和值的获取有很多种,这里介绍几个简单常用的方法 1.直接放置Checkbox,并获取Checkbox的值 上图 做法也非常 ...
    
			
    6. 
						
  6. 记 移动端页面中莫名其妙的渲染BUG
			
    问题描述: 在一个很简单的测试页面中 简单的两块布局,上下两块均没有单独设置字体大小,都用body继承的大小,即40px.我们现在给第一个块.fl  加上浮动 float:left; 另外一个块处于正 ...
    
			
    7. 
						
  7. php全角字符转换为半角函数 实例代码
			
    PHP全角半角转换函数,把目前能找到的所有全角都列出来了一个个替换吧. 之前试过网上找的通过ASCII之类的字符替换,发现很多莫名其妙的问题.最后还是换成下面的字符替换方式了,把目前能找到的所有全角都 ...
    
			
    8. 
						
  8. Ubuntu 14.04 安装flash插件
			
    分别tar.gz和apt-get方法 第一种: adboe官网下载tar.gz,进入terminal 1.解压缩包,输入命令“tar -zxvf 软件包名字” 2.拷贝插件到mozilla目录,输入命 ...
    
			
    9. 
						
  9. android 特效UI实现
			
    弧形菜单 https://github.com/daCapricorn/ArcMenu
    
			
    10. 
						
  10. pure的bug记录2
			
    <select id="stacked-state" style=" font-family: "Microsoft YaHei"; " ...
    
			
    11.