以前在写网页的时候,总是使用浏览器默认的字体,因此从未使用过@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的使用的更多相关文章
-
CSS3与页面布局学习总结(五)——Web Font与Sprite
一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...
-
把UI图里的小图标制作成icon font
一个交互比较多的UI图里面可能会有很多小图标,一般可用sprites图将多个小图标弄成一张大图,或者其它的办法,各种方法的比较可参见博主的另外一篇博客使用css3新属性clip-path制作小图标,本 ...
-
[函数] Firemonkey Windows 重新计算 Font Baseline
计算字型 Baseline 是一个不常用的函数,但如果想要显示不同大小文字下方对齐,就得用它来计算字型的 Baseline 才行,如果计算不准,显示的文字就会高高低低不整齐. 在 Firemonkey ...
-
Html中<;font>;标签的使用
Html中<font>标签的使用 <!doctype html> <html lang="en"> <head> <meta ...
-
关于firefox对font awesome本地环境无法加载问题
问题描述 昨天尝试使用font awesome加载字体图标,直接在本地引入相关文件,测试发现图标在chrome和IE环境支持,但是在firefox上怎么都显示不出来. 解决方法 通过测试发现通过htt ...
-
CSS3使用Font Awesome字体图标的控件样例(按钮,工具栏,输入框)
按钮上加入font awesome图标,用原生的input button标签无法实现,查看网上的只能通过<a><li></li></a>实现此功能,通过 ...
-
CSS 中Font Awesome 图标(附码表)
HTML中缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小.颜色.阴影或者其它任何支持的效果. Font Awesome 传送门:http://fontawesome.das ...
-
Font Squirrel
Font Squirrel FontSquirrel:国外免费字体下载网是一个提供高质量商业字体下载网站,提供海量的英文字体库,用户可以随意下载并应用于各种商业用字,无需考虑其版权问题. 官网地址:h ...
-
<;web Font的使用>;
使用font-face将字体引入web中 先将字体文件复制到项目的font文件夹中,CSS样式如下: @font-face { font-family: 'iconfont'; /*字体名称*/ sr ...
-
java 引入自定义字体font后出现的硬盘吃光的问题
有个需求要用美术字体在图片上写字 用自定义的文字有两个方法: 1. Font dynamicFont = Font.createFont(Font.TRUETYPE_FONT, InputStream ...
随机推荐
-
android:layout_gravity 和 android:gravity 的区别
gravity 这个英文单词是重心的意思,在这里就表示停靠位置的意思. android:layout_gravity 和 android:gravity 的区别 从名字上可以看到,android:gr ...
-
information_schema系列四(跟踪,列约束,表和列)
这个系列的文章主要是为了能够让自己了解MySQL5.7的一些系统表,统一做一下备注和使用,也希望分享出来让大家能够有一点点的受益. 1:KEY_COLUMN_USAGE 按照官方的解释,这个表描述的是 ...
-
漫谈MySql中的事务
最近一直在做订单类的项目,使用了事务.我们的数据库选用的是MySql,存储引擎选用innoDB,innoDB对事务有着良好的支持.这篇文章我们一起来扒一扒事务相关的知识. 为什么要有事务? 事务广泛的 ...
-
Python即时网络爬虫项目: 内容提取器的定义(Python2.7版本)
1. 项目背景 在Python即时网络爬虫项目启动说明中我们讨论一个数字:程序员浪费在调测内容提取规则上的时间太多了(见上图),从而我们发起了这个项目,把程序员从繁琐的调测规则中解放出来,投入到更高端 ...
-
PHP判断一个变量是否可以通过foreach进行遍历
<?php if( !is_array( $items ) && !$items instanceof Traversable ) //Throw exception here ...
-
PHP pathinfo() 函数
PHP pathinfo() 函数 完整的 PHP Filesystem 参考手册 定义和用法 pathinfo() 函数以数组或字符串的形式返回关于文件路径的信息. 返回的数组元素如下: [dirn ...
-
[HNOI 2006]鬼谷子的钱袋
Description 鬼谷子非常聪明,正因为这样,他非常繁忙,经常有各诸侯车的特派员前来向他咨询时政.有一天,他在咸阳游历的时候,朋友告诉他在咸阳最大的拍卖行(聚宝商行)将要举行一场拍卖会,其中有一 ...
-
Java进阶篇设计模式之九----- 解释器模式和迭代器模式
前言 在上一篇中我们学习了行为型模式的责任链模式(Chain of Responsibility Pattern)和命令模式(Command Pattern).本篇则来学习下行为型模式的两个模式, 解 ...
-
AI人工智能*实战工程师 课程大纲
课程名称 内容 阶段一.人工智能基础 — 高等数学必知必会 1.数据分析 "a. 常数eb. 导数c. 梯度d. Taylore. gini系数f. 信息熵与组合数 ...
-
Ajax请求的几个小练习
Ajax请求的几个小练习 准备工作 路由中做了分发: re_path('^app01/',include('app01.url')) app01中url.py文件的内容: from django.ur ...