以前在写网页的时候,总是使用浏览器默认的字体,因此从未使用过@font-face,然而,最近在做官网的时候,UI规定了字体,要在所有浏览器下都展现同一效果。多番查询下,发现@font-face用起来是比较容易的。

  首先我们在使用某一特定字体的时候,需要先下载字体的源文件,例如方正北魏楷书简体(FZBWKSJW),方正兰亭特黑长简体等等,常用的字体格式有:.eot、.svg、.ttf、.woff这四种。  

  引自w3c的一段话

    Internet Explorer 9, Firefox, Opera,Chrome, 和 Safari支持@font-face 规则.

    但是, Internet Explorer 9 只支持 .eot 类型的字体, Firefox, Chrome, Safari, 和 Opera 支持 .ttf 与.otf 两种类型字体.

    注意: Internet Explorer 8 及更早IE版本不支持@font-face 规则.

  

  现在,假如,有.woff格式的文件,可以将其转换为其他三种格式的文件,这里推荐一个很好用的 在线字体转换网站 。然后选择你所需要的字体格式进行转换。转换完后,会自动下载。

  使用:

  例如:在index.html文件中使用方正北魏楷书简体(FZBWKSJW),那么可以这样做:

<style>
@font-face {
font-family: myFont;
src: url("./fonts/FZBWKSJW.ttf"),
url("./fonts/FZBWKSJW.eot");
} .txt {
font-family: myFont;
}
</style>

  其中,@font-face里面的font-family用于定义字体的名称(必需的),src定义字体所存放的路径。

  注意:同一网页中可定义多个@font-face,这样在同一网页中就可以使用多种字体了。

关于@font-face的使用的更多相关文章

  1. CSS3与页面布局学习总结(五)——Web Font与Sprite

    一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...

  2. 把UI图里的小图标制作成icon font

    一个交互比较多的UI图里面可能会有很多小图标,一般可用sprites图将多个小图标弄成一张大图,或者其它的办法,各种方法的比较可参见博主的另外一篇博客使用css3新属性clip-path制作小图标,本 ...

  3. [函数] Firemonkey Windows 重新计算 Font Baseline

    计算字型 Baseline 是一个不常用的函数,但如果想要显示不同大小文字下方对齐,就得用它来计算字型的 Baseline 才行,如果计算不准,显示的文字就会高高低低不整齐. 在 Firemonkey ...

  4. Html中<font>标签的使用

    Html中<font>标签的使用 <!doctype html> <html lang="en"> <head> <meta ...

  5. 关于firefox对font awesome本地环境无法加载问题

    问题描述 昨天尝试使用font awesome加载字体图标,直接在本地引入相关文件,测试发现图标在chrome和IE环境支持,但是在firefox上怎么都显示不出来. 解决方法 通过测试发现通过htt ...

  6. CSS3使用Font Awesome字体图标的控件样例(按钮,工具栏,输入框)

    按钮上加入font awesome图标,用原生的input button标签无法实现,查看网上的只能通过<a><li></li></a>实现此功能,通过 ...

  7. CSS 中Font Awesome 图标(附码表)

    HTML中缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小.颜色.阴影或者其它任何支持的效果. Font Awesome 传送门:http://fontawesome.das ...

  8. Font Squirrel

    Font Squirrel FontSquirrel:国外免费字体下载网是一个提供高质量商业字体下载网站,提供海量的英文字体库,用户可以随意下载并应用于各种商业用字,无需考虑其版权问题. 官网地址:h ...

  9. <web Font的使用>

    使用font-face将字体引入web中 先将字体文件复制到项目的font文件夹中,CSS样式如下: @font-face { font-family: 'iconfont'; /*字体名称*/ sr ...

  10. java 引入自定义字体font后出现的硬盘吃光的问题

    有个需求要用美术字体在图片上写字 用自定义的文字有两个方法: 1. Font dynamicFont = Font.createFont(Font.TRUETYPE_FONT, InputStream ...

随机推荐

  1. sed (未完,待续)

    sed [options] 'command' file(s) options: -e<script>或--expression=<script>:以选项中的指定的script ...

  2. TPL DataFlow初探(二)

    上一篇简单的介绍了TDF提供的一些Block,通过对这些Block配置和组合,可以满足很多的数据处理的场景.这一篇将继续介绍与这些Block配置的相关类,和挖掘一些高级功能. 在一些Block的构造函 ...

  3. MySQL 树节点递归遍历所以子节点

    DELIMITER $$ DROP FUNCTION IF EXISTS `getChildList`$$ CREATE FUNCTION `getChildList`(rootId INT) RET ...

  4. node.js中使用 http-proxy 创建代理服务器

    代理,也称网络代理,是一种特殊网络服务,允许一个终端通过代理服务与另一个终端进行非直接的连接,这样利于安全和防止被攻击. 代理服务器,就是代理网络用户去获取网络信息,就是信息的中转,负责转发. 代理又 ...

  5. node.js中Buffer缓冲器的使用

    一.什么是Buffer Buffer缓冲器是用来存储输入和输出数据的一段内存.js语言没有二进制数据类型,在处理TCP和文件流的时候,就不是很方便了. 所以node.js提供了Buffer类来处理二进 ...

  6. [Hadoop]Hadoop章1 Hadoop原理解析

    Hadoop是Apache软件基金会所开发的并行计算框架与分布式文件系统.最核心的模块包括Hadoop Common.HDFS与MapReduce. HDFS HDFS是Hadoop分布式文件系统(H ...

  7. 重写equals和hashCode的方法

    为什么要有 hashCode引用 我们以"HashSet 如何检查重复"为例子来说明为什么要有 hashCode: 当你把对象加入 HashSet 时,HashSet 会先计算对象 ...

  8. You are using pip version 9.0.1, however version 9.0.3 is available.

    1,pip不能用了,提示:You are using pip version 8.1.1, however version 9.0.1 is available.网上搜索了一箩筐的安装程序,各种安装, ...

  9. 【转】权限管理学习 一、ASP.NET Forms身份认证

    [转]权限管理学习 一.ASP.NET Forms身份认证 说明:本文示例使用的VS2017和MVC5. 系统无论大小.牛逼或屌丝,一般都离不开注册.登录.那么接下来我们就来分析下用户身份认证. 简单 ...

  10. W5100S芯片特性

    W5100S是一款硬连线TCP / IP嵌入式以太网控制器,可使使用SPI(串行外设接口)和并行系统的嵌入式系统更容易实现互联网连接 W5100S适合需要稳定的Internet Connectivit ...