CSS 选用字体
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 选用字体的更多相关文章
- CSS中文字体对照表
http://hotoo.googlecode.com/svn/trunk/labs/css/css-fonts.html CSS中文字体对照表 css字体名可以使用2种Unicode格式,以“微软雅 ...
- [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 ...
- CSS定义字体间距 字体行与行间距
CSS定义字体行间距 line-height:xxpx; CSS定义字体间距 下面我们讲述一下CSS的文本属性,还是先来看一下文本属性的详细列表: 属性 属性含义 属性值 Word-s ...
- css中文字体乱码解决方案
css中文字体乱码解决方案:把css编码和html页面编码统一起来.如果html页面是utf-8.css.js也统一成utf-8编码.还有一个避免中文乱码的办法就是把中文字体写成英文来表示 css中文 ...
- CSS中文字体的英文名称(simsun)宋体,(Microsoft YaHei)微软雅黑
CSS中文字体的英文名称(simsun)宋体,(Microsoft YaHei)微软雅黑 华文细黑:STHeiti Light [STXihei] 华文黑体:STHeiti 华文楷体:STKaiti ...
- css 中文字体 unicode 对照表
css 中文字体可以用 unicode 格式来表示,比如“宋体”可以用 \5B8B\4F53 来表示.具体参考下表: 中文名 英文名 unicode 宋体 SimSun \5B8B\4F53 黑体 S ...
- css页面字体替换源代码和页面显示不一样问题解决
2018年8月27日19:58:12 css指定字体的时候,可以自制的字体,比如字符替换,比如 0没有被替换,其他在源代码被替换对应的字母,但是现实的时候在替换成正确的数字 很简单,防爬虫,但是... ...
- 【css】css 中文字体 unicode 对照表
css 中文字体可以用 unicode 格式来表示,比如“宋体”可以用 \5B8B\4F53 来表示.具体参考下表: 中文名 英文名 unicode 宋体 SimSun \5B8B\4F53 黑体 S ...
- [转载]CSS教程--字体与文本属性
b>font-family功能:用于改变HTML标志或元素的字体,你可设置一个可用字体清单.浏览器由前向后选用字体.语法:{font-family:字体1,字体2, ... ,字体n} font ...
随机推荐
- Ddr2,ddr3,ddr4内存条的读写速率
理论极限值是可以计算的:1333MHz * 64bit(单通道,双通道则128bit) / 8(位到字节单位转换) = 10.664GB/s.这只是理论,实际发挥还要看内存控制器,实际上1333单条跑 ...
- RESTframwork之视图view
一 在view.py 中: class AuthorView(APIView): def get(self, request): author_list = Author.objects.all() ...
- pycharm中快捷键的使用
转载自:https://blog.csdn.net/fighter_yy/article/details/40860949 Alt+Enter 自动添加包 shift+O 自动建议代码补全 Ctrl+ ...
- CF1139D Steps to One (莫比乌斯反演 期望dp)
\[ f[1] = 0 \] \[ f[i] = 1 + \frac{1}{m} \sum_{j = 1} ^ n f[gcd(i, j)] \ \ \ \ \ \ (i != 1) \] 然后发现后 ...
- Mac下RabbitMQ安装和在Java client端的使用
安装: 1.使用homebrew下载rabbitMQ: brew install rabbitmq 执行结果如下: Updating Homebrew... ==> Auto-updated H ...
- 《机器学习实战》AdaBoost算法(手稿+代码)
Adaboost:多个弱分类器组成一个强分类器,按照每个弱分类器的作用大小给予不同的权重 一.Adaboost理论部分 1.1 adaboost运行过程 注释:算法是利用指数函数降低误差,运行过程通过 ...
- CMake实践--操作
---<Cmake 实践>--- ---Ubuntu 14.04 1.创建一个cmake文件目录 mkdir -p ~/cmake 2.在cmake文件下创建t1子目录 cd ~/cmak ...
- 【SQL函数】我知道你想group_concat和count一起用,比如不同组合的人数?
0.背景 前几天复习了一下MySQL函数,知道一个group_concat函数很好用,但一直没实际用过.今天碰到一个问题,把我问懵逼了. 1.实例 假设有一张用户购买产品的增量表order_list, ...
- leetcode1018
根据题目的hint,使用单层循环计算: class Solution(object): def prefixesDivBy5(self, A: 'List[int]') -> 'List[boo ...
- [转]講講 John Carmack 的快速反平方根演算法
講講 John Carmack 的快速反平方根演算法 原地址http://213style.blogspot.com/2014/07/john-carmack.html 本篇的主題很簡單,講講怎麼快 ...