CSS3 @font-face 规则
指定名为"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 规则的更多相关文章
- [转]真正了解CSS3背景下的@font face规则
本文转自:http://www.zhangxinxu.com/wordpress/2017/03/css3-font-face-src-local/ by zhangxinxu from http:/ ...
- CSS3:@font-face规则
前言 过去,Web设计师为了保证网站能够正常显示,只能使用“Web安全字体”,即每台机器都预装的字体.但Web安全字体有时并不好看... @font-face能够使得任何一台机器能够显示理想中的字体. ...
- css font简写规则
是不是在很很多网站的公共样式中会看到这样的代码?font: 12px/150% Arial, Verdana, "\5b8b\4f53";意思为:字体大小/行高 字体族 " ...
- IT兄弟连 HTML5教程 CSS3揭秘 CSS规则的组成
CSS和HTML一样都是由W3C制定的标准,本章中介绍的特性和功能还是来源于CSS1和CSS2(CSS2是根据CSS1扩展的).W3C也有新的版本更新,称为CSS3.虽然浏览器已经准备开始实现CSS3 ...
- CSS3高性能动画
CSS动画属性会触发整个页面的重排relayout.重绘repaint.重组recomposite Paint通常是其中最花费性能的,尽可能避免使用触发paint的CSS动画属性,在CSS动画中使用w ...
- CSS自学笔记(12):CSS3文字特效
在CSS3中新增了多个文本属性,同样有了这些属性我们在进行问题特效处理时,就尽可能少的用到其他软件去制作特效文字了. 在以前使用CSS进行web开发的时候,必须使用计算机上安装好的字体,如果有些用户的 ...
- CSS3+HTML5特效7 - 特殊的 Loading 效果
效果如下 实现原理: 利用CSS3的@keyframes规则创建动画效果: 使用CSS3的animation效果完成滚动切换. 代码说明: 样式表中@-webkit-keyframes及@ke ...
- 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 ...
- 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. ...
- 个人练习:使用HTML+CSS3制作图片轮播功能(不使用JavaScript)
先上效果图,不要在意用来当素材的图片: 在搜索相关资料的时候,查到有两种实现方式:一是使用JavaScript,二是使用CSS3中的Animation(动画),这里使用的是CSS3中的Animatio ...
随机推荐
- pycharm无法识别自己的文件夹的程序
网上找教程折腾了半天也没解决,然后我换了一下文件夹名称…… 文件夹名称不能用数字开头,否则识别不出来.
- 蚂蚁Pincap头条
去年(18年)年底想出来看看机会,最后很幸运地拿到了 PingCAP,今日头条的 offer 以及蚂蚁金服的口头 offer.想着可以总结一下经验,分享一下自己这一段”骑驴找马”过的心路历程.当然,一 ...
- 第07组 Beta冲刺(1/5)
队名:摇光 队长:杨明哲 组长博客:求戳 作业博客:求再戳 队长:杨明哲 过去两天完成了哪些任务 文字/口头描述:代码编辑器 展示GitHub当日代码/文档签入记录:(组内共用,已询问过助教小姐姐) ...
- 第07组 Alpha冲刺(4/6)
队名:摇光 队长:杨明哲 组长博客:求戳 作业博客:求再戳 队长:杨明哲 过去两天完成了哪些任务 文字/口头描述:摇光测评的相关功能. 展示GitHub当日代码/文档签入记录:(组内共用,已询问过助教 ...
- Laravel模型事件的实现原理详解
模型事件在 Laravel 的世界中,你对 Eloquent 大多数操作都会或多或少的触发一些模型事件,下面这篇文章主要给大家介绍了关于Laravel模型事件的实现原理,文中通过示例代码介绍的非常详细 ...
- MySQL事务部分回滚-回滚到指定保存点
我们可以在mysql事务处理过程中定义保存点(SAVEPOINT),然后回滚到指定的保存点前的状态. 定义保存点,以及回滚到指定保存点前状态的语法如下. 定义保存点---SAVEPOINT 保存点名; ...
- tf.gather和tf.gather_nd、tf.cast、tf.greater
https://blog.csdn.net/Cyiano/article/details/76087747
- 使用Spring容器最简单的代码姿势
如果仅仅是为了测试简单使用一下Spring的IOC容器,或者研究一下Spring的容器的源码实现,那么在搭建Spring工程的时候,不需要复杂的xml配置.Spring3.0之后提供了Java注解配置 ...
- 有相关性就有因果关系吗,教你玩转孟德尔随机化分析(mendelian randomization )
流行病学研究常见的分析就是相关性分析了. 相关性分析某种程度上可以为我们提供一些研究思路,比如缺乏元素A与某种癌症相关,那么我们可以通过补充元素A来减少患癌率.这个结论的大前提是缺乏元素A会导致这种癌 ...
- Jenkins配置发送邮件步骤
Jenkins配置邮件步骤,以下我是以腾讯企业邮箱账号作为演示 1.配置Jenkins系统管理员邮件地址: 下拉找到以下位置 2.配置邮件通知 继续下拉,找到邮件配置.输入SMTp服务器以及邮箱后缀, ...