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. 在Django中运行脚本文件以及打印出SQL语句。

    Django终端打印SQL语句 在Django项目的settings.py文件中,在最后复制粘贴如下代码: LOGGING = { 'version': 1, 'disable_existing_lo ...

  2. CF1017G The Tree

    /* 这是什么神仙题目QAQ 首先考虑在序列上的问题 先不考虑修改成白色, 一个白点能r被染成黑色 意味着能够找到一个l使得在l-r中的操作1次数大于等于 r - l + 1 我们把初始值覆盖成-1就 ...

  3. 使用Redis数据库(String类型)

    一 String类型 首先使用启动服务器进程 : redis-server.exe 1. Set 设置Key对应的值为String 类型的value. 例子:向 Redis数据库中插入一条数据类型为S ...

  4. django 解决css，js文件304导致无法加载显示问题

    这种情况一般会在windows系统下出现 1.前台.后台如果无法加载css等样式.(建议通过此办法来解决) 这是因为你安装的某些IDE 或者其他更改了注册表导致的系统的注册表\HKEY_CLASSES ...

  5. python-ddt 数据驱动测试

    # @File : learn_ddt.py #-*- coding:utf-8 -*- #本次学习:ddt ---data drive test--数据驱动测试 #1.安装 pip install ...

  6. django交互vue遇到的问题

    接受列表(数组): request.POST.get('array', '') # 结果得到数组的最后一个元素 request.POST.getlist('array', '') # 获取整个列表

  7. uva-10700-贪心

    题意:对于一个只有加法和乘法的序列,没有加法和乘法的优先级,问,结果最大值和最小值是多少,数字范围 1<=N <= 20 解题思路: (A+B)*C - (A+(B*C)) = AC + ...

  8. 51.纯 CSS 创作一个雷达扫描动画

    原文地址:https://segmentfault.com/a/1190000015283286 感想:linear-gradient() 刷新了我的认知,它可以并列多个而不会被覆盖,并列使用时用 , ...

  9. 高程三 BOM 读书笔记

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  10. idea 关闭自动保存，未保存星号提醒， springboot + freemarker 热部署

    1,自动保存 File > setting 去掉下图勾选 2,未保存文件星号提示 File > Settings 3,spring boot 项目 热部署 3.1,pom文件添加依赖 &l ...