CSS3 @font-face属性

属性定义及使用说明

@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‘)
@font-face
{
font-family: myFirstFont;
src: url(‘Sansation_Bold.ttf‘),
     url(‘Sansation_Bold.eot‘); /* IE9+ */
font-weight:bold;
}

CSS3 字体描述符

下面的表格列出了能够在 @font-face 规则中定义的所有字体描述符:

描述符 描述
font-family name 必需。规定字体的名称。
src URL 必需。定义字体文件的 URL。
font-stretch
  • normal
  • condensed
  • ultra-condensed
  • extra-condensed
  • semi-condensed
  • expanded
  • semi-expanded
  • extra-expanded
  • ultra-expanded
可选。定义如何拉伸字体。默认是 "normal"。
font-style
  • ormal
  • italic
  • oblique
可选。定义字体的样式。默认是 "normal"。
font-weight
  • normal
  • bold
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
可选。定义字体的粗细。默认是 "normal"。
unicode-range unicode-range 可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。
时间: 2024-11-14 19:12:40

CSS3 @font-face属性的相关文章

CSS3的新增属性及其用法

CSS3的新增属性及其用法 现如今,随着 Web2.0 技术的流行,之前的 CSS2 标准和相关技术似乎已经满足不了日益增长的开发需求:人们需要实现更加美观.用户体验更好的界面.CSS3,这个新一代的标准应运而生.为了满足现有的对于 Web UI 的开发需求,它提供了一系列强大的功能,如许多新的 CSS 属性(文字,布局,颜色等等),各种 CSS 特效,甚至还支持 CSS 动画.元素的变换.这些 CSS 新特性在现阶段可以说都是非常强大和完善的,您只需要加入几行简单的 CSS 代码便可以实现出一

CSS3新增文本属性详述

CSS文本属性复习 1.white-space:对象内空格的处理方式 2.direction:文本流的方向 3.unicode-bidi:用于同一个页面里存在从不同方向读进的文本显示.与direction属性一起使用 1.white-space:对象内空格的处理方式 nowrap 控制文本不换行 pre 空白会被浏览器保留 normal 默认状态 pre-line 合并空白 保留换行符 pre-wrap 保留空白 正常换行 nowrap经常配合text-overflow一起使用,使得超出部分显示

css3中font-face属性的用法详解

@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许多人会不自然的问,这样的东西IE能支持吗?当我告诉大家@font-face这个功能早在IE4就支持了你肯定会感到惊讶.我的Blog就使用了许多这样的自定义Web字体,比如说首页的Logo,Tags以及页面中的手写英文体,很多朋友问我如何使用,能让自己的页面也支持这样的自定义字体,一句话这些都是@fo

CSS3的transform属性

CSS3的一些属性可能比较新,有一些书从国外翻译到国内的时间上会延缓1-2年.所以有一些东西还需要及时整理. 下面说一下CSS3的一个属性:transform 其实字面上的意思已经很明显了就是变化,变幻的意思. 那到底怎么个变法? transform可以选下面几个值: 旋转-rotate(rotatex,rotatey) 倾斜-skew 缩放-scale 移动-translate 下面给出的例子可能都非常简单,真正详细的还是看W3School毕竟是定期更新的 1.rotate a.rotate{

css3的部分属性

1.阴影box-shadow:x轴偏移量 y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式] 注意:inset(内阴影) 可以写在参数的第一个或最后一个,其它位置是无效的实例 正值表示在对象的底部,负值表示在对象的顶部. .boxshadow-outset{ width:100px; height:100px; box-shadow:4px 4px 6px blue,4px 4px 6px red inset; } .boxshadow-inset{ width:100p

如何理解 css3 的 perspective 属性

一.写在前面的话 最近想多了解一下CSS3的transform 3D效果,transform:英文直译就是转换,它可以实现旋转.缩放.位移等效果,听起来有没有觉得很酷的样子,狠狠的点这里来看看旋转和位移的效果. 你应该会看到这样的效果: 纳尼?这是3D?怎么一点也不酷呢? 二.让3D效果显示出来 看不到3D效果,那是因为我们没有加上 prespective 属性,我们在外层DIV上加上 prespective: 50; ,再狠狠的点这里来看看旋转和位移的效果. 你应该会看到这样的效果: 是不是有

CSS3新增颜色属性

CSS颜色属性复习 color name 颜色英文名称命名(如red,blue,pink,white等) HEX方式 十六进制方式(#FF0000,#B9B9B9等) rgb方式 三原色配色方式(rgb(255,0,00)) 这几种方式都是常用到的颜色属性,本人使用较多的是HEX方式.CSS3中新增了几种颜色属性. CSS3新增颜色属性 1.RGBA模式 2.HSL模式 3.HSLA模式 1.RGBA模式 rgba在之前一遍博客中已经提及过,a表示的是透明度,取值范围为0~1,rgb分别是红绿蓝

css字体样式(Font Style),属性

css字体样式(Font Style),属性 css字体样式(Font Style)是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者必需了解的知识.以下是我精心整理的css字体样式属性知识,供大家学习参考: css文本样式 序号 中文说明 标记语法 1 字体样式 {font:font-style font-variant font-weight font-size font-family} 2 字体类型 {font-family:"

css3 的box-sizing属性理解

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } 有时候在某些项目中会发现这些css.box-sizing究竟有什么用还得重头说起... 我们一般计算一个块状元素的宽度的时候会将左右padding,左右border宽度,margin 都算进去,如下图所示(浏览器默认计算方式),宽度不是100px,而是160px: style="width:100px;padding

css3浏览器私有属性前缀使用详解

什么是浏览器私有属性前缀 CSS3的浏览器私有属性前缀是一个浏览器生产商经常使用的一种方式.它暗示该CSS属性或规则尚未成为W3C标准的一部分. 以下是几种常用前缀 -webkit- -moz- -ms- -o- -khtml-(现在基本都没有用了,被-webkit-取代) 举例来说,一个CSS3圆角的代码是: -webkit-border-radius: 50%; -o-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius