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. ELK+zookeeper+kafka+rsyslog集群搭建

    前言 环境困境: 1.开发人员无法登陆服务器 2.各系统都有日志,日志数据分散难以查找 3.日志数据量大,查询忙,不能实时 环境要求: 1.日志需要标准化   集群流程图:   角色:   软件: 以 ...

  2. python 27 获取时区转换后的时间

    python3的datetime有timezone属性,这里介绍python2.7环境下,获取时区转换后的时间. 利用第三方插件,pytz,没有安装的话安装一下. #!/usr/bin/env pyt ...

  3. springmvc接收前台（如ajax）传来的数组list,set等图文详解

        ref:https://blog.csdn.net/wabiaozia/article/details/50803581 前言: 相信很人都被springmvc接收数组问题折磨过,查过几个解决 ...

  4. RBAC表

    --权限管理1 CREATE TABLE SystemLog--日志表 ( Id ,) PRIMARY KEY,--主键id UserName ) NOT NULL,--用户名称,创建日志的用户名称 ...

  5. web中的集群与分布式

    面试中经常会提到 集群 和 分布式.下面就来分别说说这两个在web开发中经常用到的开发方式. 集群: 集群是一组协同工作的服务实体,用以提供比单一服务实体更具扩展性与可用性的服务平台.在客户端看来,一 ...

  6. Mysql5.7 Linux安装教程

    1系统约定安装文件下载目录:/data/softwareMysql目录安装位置:/usr/local/mysql数据库保存位置:/data/mysql日志保存位置:/data/log/mysql 2下 ...

  7. Ruby学习笔记7: 添加身份验证（adding Authentication）

    我们已经完成了Category & Product页面内容的增删改查,再加入一个身份验证即可成为一个较完整的Rails App了.本文就来完成这个任务. We now need to give ...

  8. C++学习基础十四——基础类型vector

    一.vector的使用 1. #include <vector> 2. 初始化的四种方法 vector<T> v1; vector<T> v2(v1); vecto ...

  9. 2. instr用法

    跟oracle中的instr用法一样: SQL> select count(*) from t where instr(title,‟oracle‟)>0; COUNT(*) ———- 5 ...

  10. C# 实现保留两位小数的方法

    1.Math.Round(0.333333,2);//按照四舍五入的国际标准 2.double dbdata=0.335333; string str1=String.Format("{0: ...