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. Ddr2，ddr3，ddr4内存条的读写速率

    理论极限值是可以计算的:1333MHz * 64bit(单通道,双通道则128bit) / 8(位到字节单位转换) = 10.664GB/s.这只是理论,实际发挥还要看内存控制器,实际上1333单条跑 ...

  2. RESTframwork之视图view

    一 在view.py 中: class AuthorView(APIView): def get(self, request): author_list = Author.objects.all() ...

  3. pycharm中快捷键的使用

    转载自:https://blog.csdn.net/fighter_yy/article/details/40860949 Alt+Enter 自动添加包 shift+O 自动建议代码补全 Ctrl+ ...

  4. CF1139D Steps to One （莫比乌斯反演 期望dp）

    \[ f[1] = 0 \] \[ f[i] = 1 + \frac{1}{m} \sum_{j = 1} ^ n f[gcd(i, j)] \ \ \ \ \ \ (i != 1) \] 然后发现后 ...

  5. Mac下RabbitMQ安装和在Java client端的使用

    安装: 1.使用homebrew下载rabbitMQ: brew install rabbitmq 执行结果如下: Updating Homebrew... ==> Auto-updated H ...

  6. 《机器学习实战》AdaBoost算法（手稿+代码）

    Adaboost:多个弱分类器组成一个强分类器,按照每个弱分类器的作用大小给予不同的权重 一.Adaboost理论部分 1.1 adaboost运行过程 注释:算法是利用指数函数降低误差,运行过程通过 ...

  7. CMake实践--操作

    ---<Cmake 实践>--- ---Ubuntu 14.04 1.创建一个cmake文件目录 mkdir -p ~/cmake 2.在cmake文件下创建t1子目录 cd ~/cmak ...

  8. 【SQL函数】我知道你想group_concat和count一起用，比如不同组合的人数？

    0.背景 前几天复习了一下MySQL函数,知道一个group_concat函数很好用,但一直没实际用过.今天碰到一个问题,把我问懵逼了. 1.实例 假设有一张用户购买产品的增量表order_list, ...

  9. leetcode1018

    根据题目的hint,使用单层循环计算: class Solution(object): def prefixesDivBy5(self, A: 'List[int]') -> 'List[boo ...

  10. [转]講講 John Carmack 的快速反平方根演算法

    講講 John Carmack 的快速反平方根演算法  原地址http://213style.blogspot.com/2014/07/john-carmack.html 本篇的主題很簡單,講講怎麼快 ...