font-family

CSS的font-family属性可以指定（选择）字体。

语法：

1
font-family: Gill Sans Extrabold, sans-serif;

font-family的属性值是字体名称，有多个字体使用逗号隔开。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>font-family</title>
    <style>
        body{
            font-family: "Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;
        }
    </style>
</head>
<body>
<h1>利永贞网</h1>
<h2>学编程，上利永贞网</h2>
<p>study hard, improve every day</p>
</body>
</html>

@font-face

@font-face 允许网页开发者为其网页指定在线字体。 通过这种作者自备字体的方式，@font-face 可以消除对用户电脑字体的依赖。

@font-face 不仅可以放在在CSS的最顶层, 也可以放在 @规则 的 条件规则组 中。

@font-face 有3个常用属性

属性 说明
font-family 所指定的字体名字将会被用于font或font-family属性
src 远程字体文件位置的URL或者用户计算机上的字体名称
format 指定宝体所用的格式

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>@font-face</title>
    <style>
        @font-face{
            font-family:"maozedong";
            src:url("maozedong.ttf");
        }
        body{
            font-family: maozedong;
        }
    </style>
</head>
<body>
<h1>利永贞网</h1>
<h2>学编程，上利永贞网</h2>
<p>study hard, improve every day</p>
</body>
</html>

源码下载

字体格式

在桌面上浏览器支持的字体格式有：

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support 3.5 (1.9.1) 4.0 4.0 10.0 3.1
WOFF 3.5 (1.9.1) 6.0 9.0 11.10 5.1
WOFF2 39 (39)[1] 38  未实现 24 未实现
SVG Fonts[2] 未实现[3] (Yes) 未实现 (Yes) (Yes)
unicode-range

36 (36)

 (Yes) 9.0 (Yes) (Yes)

在手机上浏览器支持的字体格式有：

Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mini Opera Mobile Safari Mobile
Basic support (Yes) 1.0 (1.9.1) ? 未实现 10.0 (Yes)
WOFF 4.4 5.0 (5.0) 10.0 未实现 11.0 5.0
WOFF2 未实现 39.0 (39.0)[1] 未实现 ? ? 未实现
SVG Fonts[2] ? 未实现[3] ? 未实现 10.0 (Yes)
unicode-range ? 36.0 (36.0) ? 未实现 ? (Yes)

CSS 选用字体的更多相关文章

  1. CSS中文字体对照表

    http://hotoo.googlecode.com/svn/trunk/labs/css/css-fonts.html CSS中文字体对照表 css字体名可以使用2种Unicode格式,以“微软雅 ...

  2. [css] 浏览器字体和css设置字体之间的关系

    原文链接:http://www.zhangxinxu.com/wordpress/2010/06/%E5%8F%AF%E7%94%A8%E6%80%A7%E4%B9%8B%E6%B5%8F%E8%A7 ...

  3. CSS定义字体间距 字体行与行间距

    CSS定义字体行间距 line-height:xxpx; CSS定义字体间距 下面我们讲述一下CSS的文本属性,还是先来看一下文本属性的详细列表: 属性     属性含义     属性值 Word-s ...

  4. css中文字体乱码解决方案

    css中文字体乱码解决方案:把css编码和html页面编码统一起来.如果html页面是utf-8.css.js也统一成utf-8编码.还有一个避免中文乱码的办法就是把中文字体写成英文来表示 css中文 ...

  5. CSS中文字体的英文名称(simsun)宋体,(Microsoft YaHei)微软雅黑

    CSS中文字体的英文名称(simsun)宋体,(Microsoft YaHei)微软雅黑 华文细黑:STHeiti Light [STXihei] 华文黑体:STHeiti 华文楷体:STKaiti ...

  6. css 中文字体 unicode 对照表

    css 中文字体可以用 unicode 格式来表示,比如“宋体”可以用 \5B8B\4F53 来表示.具体参考下表: 中文名 英文名 unicode 宋体 SimSun \5B8B\4F53 黑体 S ...

  7. css页面字体替换源代码和页面显示不一样问题解决

    2018年8月27日19:58:12 css指定字体的时候,可以自制的字体,比如字符替换,比如 0没有被替换,其他在源代码被替换对应的字母,但是现实的时候在替换成正确的数字 很简单,防爬虫,但是... ...

  8. 【css】css 中文字体 unicode 对照表

    css 中文字体可以用 unicode 格式来表示,比如“宋体”可以用 \5B8B\4F53 来表示.具体参考下表: 中文名 英文名 unicode 宋体 SimSun \5B8B\4F53 黑体 S ...

  9. [转载]CSS教程--字体与文本属性

    b>font-family功能:用于改变HTML标志或元素的字体,你可设置一个可用字体清单.浏览器由前向后选用字体.语法:{font-family:字体1,字体2, ... ,字体n} font ...

随机推荐

  1. flask 基本操作 模板语言 session

    Django web:优点:大而全,ORM models ,model Form ,admin ,csrf ,session缺点:资源浪费 Flask web:优点:小而精,ORM:x , Form: ...

  2. Navicat Premium 12.0.18 / 12.0.24安装与激活

    若使用Navicat Premium 12.1.8.0请转至Navicat Premium 12.1.8.0安装与激活,其实每个小版本更迭变化不大.另外最重要的是,请仔细阅读本文激活部分,总有一些人遇 ...

  3. mocha测试接口类型及测试报告收集

    记录参考: 参考文档: 测试报告以及es6: http://www.ruanyifeng.com/blog/2015/12/a-mocha-tutorial-of-examples.html 测试接口 ...

  4. Flightphp了解一下

    Flight是什么? Flight是一个快速,简易,可扩展的PHP框架.Flight能使你快速和轻松地创建RESTful Web应用. require 'flight/Flight.php'; Fli ...

  5. nodejs学习笔记<七> 路由

    // 引用模块(与C#中命名空间,Java中引用包同理) var http = require("http"); var path = require("path&quo ...

  6. 使用Java让android手机自动执行重复重启

    public static void main(String[] args)throws IOException,Exception { for(int j=0;j<10;j++) { Thre ...

  7. ROS进阶学习笔记（11）- Turtlebot Navigation and SLAM

    (写在前面: 这里参考rbx书中第八章和ROS社区教程进行学习,先看社区教程) ===  Doing the Turtlebot Navigation   === ref ros wiki: http ...

  8. 重识linux-linux的新增与删除用户组和切换命令

    重识linux-linux的新增与删除用户组 1 相关文件 /etc/group /etc/gshadow 2操作相关 groupadd group1 groupmod group1 groupdel ...

  9. 以虎嗅网4W+文章的文本挖掘为例，展现数据分析的一整套流程

    本文转自知乎 作者:苏格兰折耳喵 ----------------------------------------------------- 本文作者将结合自身经验,并以实际案例的形式进行呈现,涉及从 ...

  10. HTTP 416

    真是活久见, 竟然遇到了HTTP 416 参照 http://baike.baidu.com/view/1790469.htm , Requested Range Not Satisfiable 如果 ...