CSS3 @font-face 规则

代码如下:

@font-face {
font-family: 'MyFont';
src: url('HelveticaNeueLTPro-UltLt.otf');
}
body{
font-family: 'MyFont',Arial,sans-serif;
}

效果如下：

属性定义及使用说明

@font-face规则，网页设计师再也不必使用的"web-safe"的字体之一。

字体的名称，font - face规则：

font-family: myFirstFont;

字体文件包含在您的服务器上的某个地方，参考CSS：

src: url('Sansation_Light.ttf')

如果字体文件是在不同的位置，请使用完整的URL：

src: url('http://www.w3cschool.css/css3/Sansation_Light.ttf')

现在准备使用该字体，下面是如何使用它所有的div元素的一个例子：

div
{
font-family: myFirstFont;
}

语法：

@font-face
{
font-properties
}

以下实例为在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 规则相关推荐

html如何太假icon图标,CSS3 icon font完全指南(CSS3 font 会取代icon图标)
为什么要将icon做成字体? 在很多网站项目中,我们常常会用到各种透明小图标,然后网站要兼容各个浏览器,也可能会有多个尺寸,甚至还要考虑换肤等需求.那么我们就要将这些小图标输出为多种尺寸.颜色和文件格 ...
css符集图标显示不出来,CSS3 icon font完全指南(CSS3 font 会取代icon图标)
为什么要将icon做成字体? 在很多网站项目中,我们常常会用到各种透明小图标,然后网站要兼容各个浏览器,也可能会有多个尺寸,甚至还要考虑换肤等需求.那么我们就要将这些小图标输出为多种尺寸.颜色和文件格 ...
真正了解@font face里font-weight的作用
详细了解@font-face使用规则可以去看张鑫旭的文章真正了解CSS3背景下的@font face规则我们这里只重点强调@font-face里font-weight,font-style的用法,因 ...
怎样通过font属性控制CSS字体样式？
为了更方便地控制网页中各种各样的字体,CSS提供了一系列的字体样式属性,具体如下. (1)font-size属性:字号 font-size属性用于设置字号,该属性的属性值可以为像素值.百分比数值.倍率 ...
HTML5新增标签及CSS3新增属性
一.h5新增标签新增元素说明 video 表示一段视频并提供播放的用户界面 audio 表示音频 canvas 表示位图区域 source 为video和audio提供数据源 track 为vid ...
css3直线运动_纯css3实现曲线运动——贝塞尔曲线(cubic-bezier)
目标--就是纯css实现下面的曲线运动 image.png 这里是我最后实现的效果动画:在线视频实现效果直接看所有的代码: html代码 css代码 html{ background: #ad4e2 ...
用CSS3实现旋转的CD
用到了css3的@keyframes规则 (http://www.w3school.com.cn/cssref/pr_keyframes.asp),通过@keyframes规则能够创建动画.CSS3是 ...
html语言文字闪烁,CSS3+HTML5特效6 - 闪烁的文字
先看效果 abcd 这个效果也比较简单,利用keyframes对文字的大小.透明度及颜色做循环显示. CSS @-webkit-keyframes flash { 0%{ opacity:; } 50 ...
【一起来烧脑】一步学会CSS3体系
[外链图片转存失败(img-yfi1VPyy-1563434266398)(https://upload-images.jianshu.io/upload_images/11158618-fc8784 ...

CSS3 @font-face 规则

属性定义及使用说明

语法：

语法

相关文章

CSS3 @font-face 规则相关推荐

最新文章

热门文章