css3的font-face

原创 2013年12月03日 13:54:44

当您您找到或购买到希望使用的字体时,可将该字体文件存放到 web 服务器上,它会在需要时被自动下载到用户的计算机上。
您"自己的"的字体是在 CSS3 @font-face 规则中定义的。


在新的 @font-face 规则中,您必须首先定义字体的名称(比如 myFirstFont),然后指向该字体文件。
如需为 HTML 元素使用字体,请通过 font-family 属性来引用字体的名称 (myFirstFont)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
	@font-face{
		font-family:myFirstFont;
		src: url(calibrid.ttf);	
	}
	@font-face{
		font-family:myFirstFont;
		src: url(calibriz.ttf);
		font-weight:bold;
	}
	div{
		font-family:myFirstFont;
	}
</style>
<title>无标题文档</title>
</head>

<body>
<div>
	这是font-face测试~~  <b> 这是font-face测试~~</b>  这是font-face测试~~
</div>
</body>
</html>

注意:

使用粗体字体

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


效果图:


版权声明:原创文章,请标明出处~~~

利用CSS3 @font-face使用图标字体

CSS3可以通过@font-face使用自定义字体,这是让前端工程师拍手称赞的一件事情。在CSS3之前,前端页面的字体只能使用设备中已经安装好的字体。@font-face 可以让前端工程师随心所欲的使...
  • licaomengRICE
  • licaomengRICE
  • 2015年11月26日 18:24
  • 5805

@Font-face的基本用法及让全部浏览器都兼容的方法

@Font-face基本介绍:  @font-face 是一个css2的一个语法,它允许你在网页上显示一个自定义的字体。即使客户机器上可以没有安装这种字体,网页也可以显示。  本文将介绍@...
  • abld99
  • abld99
  • 2016年03月04日 15:34
  • 302

CSS3 @font-face详细用法local

当我们想让自己的网站显示某一特定字体时,既要考虑用户电脑的情绪,又要考虑继承性,那么我们就要采取点措施了。 我们需要css中的@font-face属性来调取我们所需要的字体地址。 ...
  • bloomcat
  • bloomcat
  • 2014年07月12日 12:34
  • 1307

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

/*font-face 格式 @font-face{ font-family:SingleMaltaRegular; src: [][, []]*; font-weight: normal...
  • liu_yanna
  • liu_yanna
  • 2015年11月13日 17:03
  • 1630

【CSS3】---@font-face

  • xuan0107
  • xuan0107
  • 2015年06月04日 14:22
  • 206

CSS3: @font-face

想要制作一些很酷的头部效果并且不使用图片文件嘛?可以尝试一下 CSS3 里面的 @font-face。 代码如下:   @font-face { font-family: qianduanNet; ...
  • Vanessa219
  • Vanessa219
  • 2011年01月12日 15:27
  • 943

css3中的@font-face的用法(定义多个规则)

@font-face使用自定义的字体。 除此之外,还可以定义多个·规则。 相关链接 eg@font-face{ font-family: myFirstFont; src: url('Sans...
  • kbx8916
  • kbx8916
  • 2016年12月16日 16:17
  • 1810

CSS3 @font-face

@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许...
  • Zoe_Wang_ing
  • Zoe_Wang_ing
  • 2013年11月08日 13:23
  • 635

CSS3利用@font-face使用自定义字符和图标

前言今天在看wordpress主题的时候,看到一个`class`名为`fa fa-weibo` 当时想知道这是什么用法,然后就找了一下style.css 文件,看看具体的CSS内容,然后发现这是一个很...
  • u011675745
  • u011675745
  • 2016年10月05日 20:37
  • 2605

@font-face的详细用法

在CSS 3中,可以用@font-face属性来利用服务器端字体,现在来总结下@font-face属性的详细用法: 1.下载安装所需的服务器端字体 在项目中,客户一般会提供具有版权的字体文件,或者...
  • qq_34254618
  • qq_34254618
  • 2016年04月12日 14:09
  • 1078
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3的font-face
举报原因:
原因补充:

(最多只允许输入30个字)