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. SQL Server 导入超大脚本

    另外使用window server 版操作系统,执行脚本文件比普通版操作系统大大提升大小限制. 在执行SQL脚本的时候要是出现了这些情况我咋办呢? 步入正轨 应用场景:服务器升级,比如原来是2003的 ...

  2. vs2017配置文件目录

    C:\Users\Administrator\AppData\Local\Microsoft\VisualStudio\15.0_6d0a0a42

  3. 查看linux的IO占用

    iotop -oPiostat -xm 1 iostat -d -x -kiostat -c top

  4. linux&php：ubuntu安装php-7.2

    1.下载php源码,地址:http://www.php.net/downloads.php 这里下载的是tar.gz的包 2.解压安装 将安装包解压到/usr/local/php 安装C的编译工具 s ...

  5. python项目入门之 安装、创建

    3年前接触python,那时候还是文本格式进行学习,但是由于一直没有项目实践,所以就搁浅了 今天,python如火如荼,适用于人工智能等多领域,已经成为了语言界的翘楚 python有非常多的优点,开源 ...

  6. GitLab如何创建分支及拉取代码

    从gitlab地址进入进行操作 1.登录GitLab(账号密码由company统一提供,如果是自己操作的话,就需要先注册) 2.登录gitlab后对已创建好的项目进行分支创建(此处默认项目已创建好,如 ...

  7. 安全测试6_Web安全工具第一节（浏览器入门及扩展）

    今天来学习下浏览器的功能,浏览器是我们经常用到但是功能却很强大的一个东东,我们经常用到的无非是三种(谷歌.火狐.IE) 1.浏览器功能介绍: 下面以谷歌浏览器(Chrome版本为56)为例,介绍下,懂 ...

  8. CentOS7开机时的菜单选项及时间的修改

    一.在CentOS更新后,并不会自动删除旧内核.所以在启动选项中会有多个内核选项,可以手动使用以下命令删除多余的内核:(正常下,第一个选项正常启动,第二个选项急救模式启动(系统出项问题不能正常启动时使 ...

  9. Eclipse svn 项目 星号

    上图: 明明没有文件修改过就是无脑显示有提交的文件,有强迫症受不了. 而且每次提交你都点开看有没有漏掉啥文件.很麻烦.也很难受 .很容易漏提交 把本地文件跟SVN同步对比一下. 果然有文件. 添加规则 ...

  10. 10.Appium驱动app报错

    1.首先手机使用usb连接电脑端接受控制 2.打开appium,配置Desired Capabilities 参数: Appium驱动打开微信App 参数配置如下: start session 报错: ...