嵌入字体@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. R - 变化plot字形,嵌入字体以pdf

    近期使用R绘图遇到两个问题 1. 使用不同的字体 2. 保存 plot 至 pdf 当字体嵌入pdf (embed the font) 使用extrafont和Ghostscript能够解决这两个问题 ...

  3. as3.0 嵌入字体的用法

    var txt:TextField = new TextField();//创建文本 txt.embedFonts=true;//确定嵌入字体 var font:Font=new MyFont();/ ...

  4. [ActionScript 3.0] 使用Embed在类中嵌入字体

    package { import flash.display.Sprite; import flash.text.Font; import flash.text.TextField; import f ...

  5. [ActionScript 3.0] 嵌入字体

    首先我们要生成一个swf的字体库,以微软雅黑为例,新建YaHei_font.fla,ctrl+L,在库面板中右键→新建字型,弹出字体元件属性窗口,选择要嵌入的字体, 并选择为ActionScript ...

  6. W3School-CSS 字体(font)实例

    CSS 字体(font)实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 CSS 内边距 ...

  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. CSS 字体(font)实例

    CSS 字体(font)实例CSS 字体属性定义文本的字体系列.大小.加粗.风格(如斜体)和变形(如小型大写字母).CSS 字体系列在 CSS 中,有两种不同类型的字体系列名称: 通用字体系列 - 拥 ...

  9. 利用CSS的@font-face属性 在网页中嵌入字体

    字体使用是网页设计中不可或缺的一部分.网页是文字的载体,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的时候就有可能看不到真实的设计. 美工设计师最常做的办 ...

随机推荐

  1. Android IOS WebRTC 音视频开发总结(八)-- ios上移植webRTCDemo

    这篇文章主要介绍ios webrtcdemo的实现及相关注意事项,转载请说明出处(博客园RTC.Blacker) 前面很多人问webrtc android下有webrtcdemo,ios上怎么找不到, ...

  2. CICS的database中R D中参数的含义

    见链接 http://blog.163.com/ajj_star/blog/static/1626772542010328113513429/ Region Definitions (RD) 定义了所 ...

  3. 【风马一族_php】NO1_用php发出一声 Hi

    原文来自:http://www.cnblogs.com/sows/p/5990157.html  (博客园的)风马一族 侵犯版本,后果自负 第一步 安装WEB服务器 http://www.cnblog ...

  4. [leetcode]_K Sum 问题

    问题:K Sum问题是一个问题系列,在一个数组中找K个数的和能够满足题目中要求.从2 Sum 到 3 Sum , 3 Sum Clozet , 4 Sum..解法虽一开始不容易想到,但get到解题技能 ...

  5. 【原创】解决鼠标经过子元素触发mouseout,mouseover事件的问题

    关键词:父子元素关系  mouseout  mouseover  事件  事件冒泡 初期代码: <!DOCTYPE html> <html> <head> < ...

  6. 定时重启Apache与MySQL方法

    可以定时重启apache服务器等.让网站运行的效果更快. 采用at命令添加计划任务. 有关使用语法可以到window->“开始”->运行“cmd”->执行命令“at /”,这样界面中 ...

  7. linux 的开机启动脚本顺序

    linux 开机启动脚本顺序 linux 开机启动脚本顺序. 第一步:启动内核 第二步:执行init (配置文件/etc/inittab) 第三步:启动相应的脚本,并且打开终端/etc/init.d  ...

  8. php文件上传的例子

    1.上传表单 upload.html 程序代码 [html] view plaincopy <form enctype="multipart/form-data" actio ...

  9. Linux服务器的初步配置流程

    作者: 阮一峰 日期: 2014年3月14日 开发网站的时候,常常需要自己配置Linux服务器. 本文记录配置Linux服务器的初步流程,也就是系统安装完成后,下一步要做的事情.这主要是我自己的总结和 ...

  10. Android开发之Source无法覆写public void onClick(View v)

    初学Android开发,在为一个按钮[该按钮继承OnClickListener()]写监听时,发现无法在Source中引入public void onClick(View v),当时非常纳闷,平常情况 ...