使用自己需要的字体

在新的 @font-face 规则中,您必须首先定义字体的名称(比如 myFirstFont),然后指向该字体文件。

如需为 HTML 元素使用字体,请通过 font-family 属性来引用字体的名称 (myFirstFont):

实例

<style>
@font-face
{
  font-family: myFirstFont;
  src: url('singlemalta-webfont.ttf'),
      url('singlemalta-webfont.eot'); /* IE9+ */
} div
{
  font-family:myFirstFont;
}
</style>

 

使用粗体字体

您必须为粗体文本添加另一个包含描述符的 @font-face:

示例:

@font-face
{
  font-family: myFirstFont;
  src: url('singlemalta-webfont.ttf'),
     url('singlemalta-webfont.eot'); /* IE9+ */
  font-weight:bold;
}

  

 

字体描述符

下面的表格列出了能够在 @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"。
 

css3学习总结6--CSS3字体的更多相关文章

  1. CSS3学习笔记(3)-CSS3边框

    p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...

  2. [CSS3]学习笔记-文字与字体相关样式

    1.给文字添加阴影 <!doctype html> <html> <head> <meta charset="utf-8"> < ...

  3. CSS3 学习笔记(边框 背景 字体 图片 旋转等)

    边框 盒子圆角 border-radius:5px / 20%: border-radius:5px 4px 3px 2px; 左上,右上,右下,左下 盒子阴影 box-shadow:box-shad ...

  4. CSS3学习笔记(1)-CSS3选择器

    p{ font-size: 15px; text-indent: 2em; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid ...

  5. CSS3学习笔记(4)-CSS3函数

    p{ font-size: 15px; text-indent: 2em; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid ...

  6. HTML5移动开发学习笔记之CSS3基础学习

    CSS回顾 在学CSS3之前首先巩固下CSS的基础知识. 1.CSS框模型 举例子: #box { width: 70px; margin: 10px; padding: 5px; } 这个代码将出现 ...

  7. HTML5+CSS3学习笔记(二) 页面布局:HTML5新元素及其特性

    HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <head ...

  8. css和css3学习

    css和css3学习 css布局理解 css颜色大全 样式的层叠和继承 css ::before和::after伪元素的用法 中文字体font-family常用列表 cursor属性 css选择器 F ...

  9. html5--6-16 CSS3中的文字与字体

    html5--6-16 CSS3中的文字与字体 中文字体包很大,少量字体的话可以有其它方法. 有字库-首页-全球第一中文web font(在线字体)服务平台.web font.webfont.在线字体 ...

  10. html5--6-23 CSS3中的文字与字体

    html5--6-23 CSS3中的文字与字体 text-overflow 设置是否使用一个省略标记(...)标示对象内文本的溢出 clip: 默认值当对象内文本溢出时不显示省略标记(...),而是将 ...

随机推荐

  1. Mac上的终端(Terminal)启动缓慢

    最近重装10.9系统,装完后,发现终端(Terminal)启动之前1秒都不用,现在却需要5-10秒,搜寻了下,发现是终端的统日志导致的问题,只需要执行下下面的命令,终端就又身轻如燕了! sudo rm ...

  2. 创建,增加,删除mysql表分区

    1.测试添加分区和删除分区 ###添加删除range分区 (1)创建一个分区: CREATE TABLE titles (     emp_no      INT NOT NULL,     titl ...

  3. User表格式

    "_id":基本是700多 "name":"xx01" "pwd":"123"

  4. 安装TFS2008最终版(转载)

    一.安装操作系统:windows server 2003 + Sp2具体步骤: 1.安装windows server 2003时选用工作组(默认为workgroup).由于在工作组环境中部署,因此使用 ...

  5. glibc 简介:

    glibc 编辑 glibc是GNU发布的libc库,即c运行库.glibc是linux系统中最底层的api,几乎其它任何运行库都会依赖于glibc.glibc除了封装linux操作系统所提供的系统服 ...

  6. linux在安装jdk时报错

    用脚本执行jdk时下面的错误 can not initialize UI, Running in headless mode, No X11 DISPLAY variable was set, but ...

  7. Linux 4.6分支已到生命尽头 请尽快升级至Linux 4.7.1

    导读 在Linux Kernel 4.7首个维护版本发布的同时,Greg Kroah-Hartman同时也向社区发布了Linux Kernel 4.6.7版本.作为Linux 4.6分支的第7个维护版 ...

  8. 对比WDCP面板与AMH面板的区别与选择

    转载: http://www.laozuo.org/2760.html | 老左博客 随着VPS主机的性价比提高(其实就是降价)我们很多站长会越来越多的选择使用VPS搭建网站或者运营一些项目,相比较而 ...

  9. NYOJ 38布线问题

    http://acm.nyist.net/JudgeOnline/problem.php?pid=38 布线问题 时间限制:1000 ms  |  内存限制:65535 KB 难度:4   描述 南阳 ...

  10. qsort用法总结

    一.对int类型数组排序 ]; int cmp ( const void *a , const void *b ) { return *(int *)a - *(int *)b; } qsort(nu ...