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 ...
随机推荐
- js 原生图片上传
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- tornado项目注意点
大体框架思想 如果你做的项目是偏向中小型的话,MTV或者MVC已经足够支撑起整个项目,而如果你做的项目比较大大话,或者说可能以后的业务量很大的话,那你就需要用到四层架构的思想了,那么我们就各自分析下俩 ...
- js语法规则 ---console.log ---- prompt ----基本类型 ---parseInt
在页面中可以在body里面加入type=”text/javascript” 例如: <script type="text/javascript"> </scrip ...
- nopcommerce 常用属性验证
Decimal可空:[UIHint("DecimalNullable")] datetime可空: [UIHint("DateTimeNullable")] i ...
- 《算法》BEYOND 部分程序 part 1
▶ 书中第六章部分程序,加上自己补充的代码,包括高斯消元法求解线性方程组,高斯 - 约旦消元法求解线性方程组 ● 高斯消元法求解线性方程组,将原方程转化为上三角矩阵,然后从最后一个方程开始求解 pac ...
- python [] 数组 list 交集 并集 差集
>>> a = [1,2,3] >>> b = [2,4,5] >>> list(set(a).intersection(set(b))) [2] ...
- PHP中的 抽象类(abstract class)和 接口(interface)
抽象类abstract class 1 .抽象类是指在 class 前加了 abstract 关键字且存在抽象方法(在类方法 function 关键字前加了 abstract 关键字)的类. 2 .抽 ...
- Human Interface Device (HID) Class Decoder
http://www.usblyzer.com/usb-human-interface-device-hid-class-decoder.htm Human Interface Device (H ...
- Executors.newSingleThreadScheduledExecutor();线程池中放入多个线程问题
转自:https://blog.csdn.net/u012062455/article/details/78247234/
- Oracle的基本数据类型(常用)
转自:https://www.2cto.com/database/201810/783959.html 1.字符型 Char 固定长度字符串 占2000个字节 Varchar2 可变长度字符串 占40 ...