使用自己需要的字体

在新的 @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. 中间件、MetaQ入门学习

    目录 . 中间件技术 . MetaQ中间件 . MetaQ编程实践 1. 中间件技术 0x1: 中间件简介 中间件(Middleware)是提供系统软件和应用软件之间连接的软件,以便于软件各部件之间的 ...

  2. OKR详解及其实施

    这阵子大家一直在讨论Google的绩效考核方法OKR,我们发现很多文章和说法存在错误和误导,现将其来龙去脉,操作步骤,操作技巧阐述如下,供大家参考. OKR全称是Objectives and Key ...

  3. java判断list为空

    isEmpty()判断有没有元素而size()返回有几个元素 list.isEmpty()和list.size()==0 没有区别 list!=null跟!list.isEmpty()有什么区别? 这 ...

  4. sql注入实例分析

    什么是SQL注入攻击?引用百度百科的解释: sql注入_百度百科: 所谓SQL注入,就是通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令.具 ...

  5. 轻量级应用开发之(10) UINavigationController导航控制器

    一 多控制器 1)一个iOS的app很少只由一个控制器组成,除非这个app极其简单2)当app中有多个控制器的时候,我们就需要对这些控制器进行管理3)有多个view时,可以用一个大的view去管理1个 ...

  6. 使用C#进行图片转换格式,缩放,自动旋转,保留exif(转载)

    这几天心血来潮做了一个批量图片缩放,转换格式,并且可以根据exif的信息旋转图片,校正exif信息后保存的小程序.根据配置文件 指定需要的功能. 1 2 3 4 5 6 7 8 9 10 11 12 ...

  7. WPF 获取IP地址

    List<string> ipList = new List<string>(); foreach (IPAddress _IPAddress in Dns.GetHostEn ...

  8. 开源项目剖析之apache-common-pool

    前沿 该工程提供了对象池解决方案,该方案主要用于提高像文件句柄,数据库连接,socket通信这类大对象的调用效率.简单的说就是一种对象一次创建多次使用的技术. 整体结构 整个项目有三个包分别是org. ...

  9. NoClassDefFoundError: org/slf4j/LoggerFactory解决

    缺少slf4j-api-1.5.2,slf4j-log4j12-1.5.2,log4j-1.2.8这几个包,导入即可

  10. C#中的volatile用法

    volatile 影响编译器编译的结果,指出,volatile 变量是随时可能发生变化的,与volatile变量有关的运算,不要进行编译优化,以免出错,(VC++ 在产生release版可执行码时会进 ...