指定名为"myFirstFont"的字体,并指定在哪里可以找到它的URL:

@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9 */
}

以下实例为在div中使用的字体:

div
{
font-family: myFirstFont;
}

语法

@font-face
{
font-properties
}
字体描述 说明
font-family name 必需的。定义字体的名称。
src URL 必需的。定义该字体下载的网址(S)
font-stretch normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded
可选。定义该字体应该如何被拉长。默认值是"正常"
font-style normal
italic
oblique
可选。定义该字体应该是怎样样式。默认值是"正常"
font-weight normal
bold
100
200
300
400
500
600
700
800
900
可选。定义字体的粗细。默认值是"正常"
unicode-range unicode-range 可选。定义该字体支持Unicode字符的范围。默认值是"ü+0-10 FFFF"

CSS3 @font-face 规则的更多相关文章

  1. [转]真正了解CSS3背景下的@font face规则

    本文转自:http://www.zhangxinxu.com/wordpress/2017/03/css3-font-face-src-local/ by zhangxinxu from http:/ ...

  2. CSS3:@font-face规则

    前言 过去,Web设计师为了保证网站能够正常显示,只能使用“Web安全字体”,即每台机器都预装的字体.但Web安全字体有时并不好看... @font-face能够使得任何一台机器能够显示理想中的字体. ...

  3. css font简写规则

    是不是在很很多网站的公共样式中会看到这样的代码?font: 12px/150% Arial, Verdana, "\5b8b\4f53";意思为:字体大小/行高 字体族 " ...

  4. IT兄弟连 HTML5教程 CSS3揭秘 CSS规则的组成

    CSS和HTML一样都是由W3C制定的标准,本章中介绍的特性和功能还是来源于CSS1和CSS2(CSS2是根据CSS1扩展的).W3C也有新的版本更新,称为CSS3.虽然浏览器已经准备开始实现CSS3 ...

  5. CSS3高性能动画

    CSS动画属性会触发整个页面的重排relayout.重绘repaint.重组recomposite Paint通常是其中最花费性能的,尽可能避免使用触发paint的CSS动画属性,在CSS动画中使用w ...

  6. CSS自学笔记(12):CSS3文字特效

    在CSS3中新增了多个文本属性,同样有了这些属性我们在进行问题特效处理时,就尽可能少的用到其他软件去制作特效文字了. 在以前使用CSS进行web开发的时候,必须使用计算机上安装好的字体,如果有些用户的 ...

  7. CSS3+HTML5特效7 - 特殊的 Loading 效果

    效果如下     实现原理: 利用CSS3的@keyframes规则创建动画效果: 使用CSS3的animation效果完成滚动切换. 代码说明: 样式表中@-webkit-keyframes及@ke ...

  8. CSS3+HTML5特效4 - 横向无缝滚动

    先看例子 This is a test 1. This is a test 2. This is a test 3. This is a test 4. This is a test 5. This ...

  9. CSS3+HTML5特效3 - 纵向无缝滚动

    老惯例,先看例子. This is a test 1. This is a test 2. This is a test 3. This is a test 4. This is a test 5. ...

  10. 个人练习:使用HTML+CSS3制作图片轮播功能(不使用JavaScript)

    先上效果图,不要在意用来当素材的图片: 在搜索相关资料的时候,查到有两种实现方式:一是使用JavaScript,二是使用CSS3中的Animation(动画),这里使用的是CSS3中的Animatio ...

随机推荐

  1. Java基础教程--安卓入门教程(七)

    关注我,每天都有优质技术文章推送,工作,学习累了的时候放松一下自己. 欢迎大家关注我的微信公众号:「醉翁猫咪」 什么是接口? 接口的基本语法 接口的基本语法(一) 使用interface定义 接口当中 ...

  2. IDEA的foreach循环

    试了试其他快捷键, 突然发现的... 先弄一个list 再把变量名写出来先 按快捷键 ctrl+alt+J, 选最后一个 看效果

  3. 农场派对(party)(信息学奥赛一本通 1497)

    [题目描述] N(1≤N≤1000)头牛要去参加一场在编号为 x(1≤x≤N) 的牛的农场举行的派对.有 M(1≤M≤100000) 条有向道路,每条路长 Ti(1≤Ti≤100):每头牛都必须参加完 ...

  4. pycharm+gitee环境搭建(超详细)

    背景:本地开发代码在没有云托管的时候代码很容易丢掉,如果是小团队,这时候可以使用公司团队注册一个账号共同使用.如果是个人用于代码存储或者用于以后项目经验也推荐gitee.大的团队可以购买 环境:win ...

  5. torch

    1.从数据直接构建tensor x = torch.tensor([5.5,3]) 2.从已有的tensor构建一个tensor.这些方法会重用原来tensor的特征. x = x.new_ones( ...

  6. [Beta]第一次 Scrum Meeting

    [Beta]第一次 Scrum Meeting 写在前面 会议时间 会议时长 会议地点 2019/5/5 22:00 30min 大运村公寓6F寝室 附Github仓库:WEDO 例会照片 工作情况总 ...

  7. java.lang.Error: java.lang.NoSuchMethodError: org.objectweb.asm.ClassWriter.<init>(Z)V

    有时候出现这种怪异的问题,是由于多个版本的class存在. 比如说:某个java编译成class后,放到classes下面,然后lib目录下,也有这个class所在的jar包,这样就导致classpa ...

  8. GWAS Catalog数据库简介

    GWAS Catalog The NHGRI-EBI Catalog of published genome-wide association studies EBI负责维护的一个收集已发表的GWAS ...

  9. 查询优化 In Oracle

    Cost-based query transformation in Oracle Enhanced Subquery Optimizations in Oracle Cost-based query ...

  10. Weblogic部署web项目获取项目根目录为null

    写在前面 图片上传功能, web项目部署在本地Tomcat上并没有问题, 但是打成war包部署到Linux服务器Weblogic下却出现如题问题, 导致图片上传失败. 问题代码 String real ...