嵌入字体@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. AnyCAD三维控件场景节点详解

    SceneNode是AnyCAD三维图形平台的AnyViz显示引擎的核心对象之一,只有放在场景管理器(SceneManager)里的节点才能被显示引擎所显示. 1.   节点分类 SceneNode是 ...

  2. C\C++ 框架和库整理(转)

    [本文系外部转贴,原文地址:http://coolshell.info/c/c++/2014/12/13/c-open-project.htm]留作存档 下次造轮子前先看看现有的轮子吧 值得学习的C语 ...

  3. eclipse自动补全

    最简单的修改方式是:Windows——>Preferences——>Java-->Editor-->Content Asist,在Auto activation trigger ...

  4. css3动画属性

    Transitions  transitions:property 用哪个属性进行设置             :duration 执行时间             :timing-function  ...

  5. eclipse 中maven项目右键没有maven菜单问题

    修改项目.project文件,确保有maven2Builder和maven2Nature2个标签: <?xml version="1.0" encoding="UT ...

  6. CentOS6.4安装Smokeping节点监控软件

    Smokeping:它是rrdtool的作者制作的,在图形显示方面很漂亮,可以用来很好的检测网络状态和稳定性,下面简单说一下Smokeping的安装以及配置方法. 0.首先关闭selinux和防火墙 ...

  7. Azkaban 作业调度

    转载一篇不错的文章:http://www.cnblogs.com/smartloli/p/5191155.html

  8. 通过API函数来控制SQLite数据库增删改查

    person类属性有Intenger id,String name,Intenger  age,相应的构造方法和set get方法. package com.xh.tx.dao; import and ...

  9. psd图片到html

    正确的做法是:拿到psd后,先不要做别的,直接在文本编辑器中将网页的框架写出来,不要假设这块将来css要去怎么渲染,完全自然化的标签,不加任何的css.写完之后在各个浏览器运行之后确保大体定位都没有问 ...

  10. Ioc 控制反转 实例

    关于IOC 或者是DI 什么的真的很坑爹. 开始理解了这东西了然后闲的没事就又百度了一下,得  我又凌乱了.  看了两个大神的贴 尼玛啊 完全是反过来了. 纠结了半天.然后就想找个简单点不坑爹的原理代 ...