font-family 属性设置文本的字体系列。

font-family 属性应该设置几个字体名称作为一种"后备"机制,如果浏览器不支持第一种字体,他将尝试下一种字体。

注意: 如果字体系列的名称超过一个字,它必须用引号,如Font Family:"宋体"。

多个字体系列是用一个逗号分隔指明:

实例

p{font-family:"Times New Roman", Times, serif;}

如何在css中引入外部字体

css引入外部字体包的方法

@font-face{
font-family: 'oswald';
src : url('..//fonts/oswald.regular.ttf');
}

引入这个字体

.fontFail {
font-family: oswald;
}

数字使用oswald字体,中文使用思源

body{
font-family: "oswald", "SourceHanSansSC-Light","Source-Han-Light","Source Han Sans CN","SourceHanSansCN-Light","webfontSourceHanSansSC" !important
} / oswald字体只有数字和英文,所以汉字就默认使用下面的字体(思源字体) / "SourceHanSansSC-Light","Source-Han-Light","Source Han Sans CN","SourceHanSansCN-Light"
/ 这个是思源字体的不同写法,为了兼容不同浏览器可以识别该字体 / "webfontSourceHanSansSC" 这个就比较厉害了。 是上面字体包的引用。
如果前面的字体就没找到,就下载这个字体使用。
字体也可以引用不同的文字格式
@font-face {
font-family: "SourceHanSansCN-Light";
src: url("../font/SourceHanSansCN-Light.otf"),
url("../font/SourceHanSansCN-Light.ttf");
font-family: "SourceHanSansCN-Normal";
src: url("../font/SourceHanSansCN-Normal.otf");
font-family: "SourceHanSansCN-Regular";
src: url("../font/SourceHanSansCN-Regular.otf");
}


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. html 如何访问 jar 包里面的静态资源(js、css、字体等)

    前言:最近两天在尝试写一个工具 jar 包,里面包含后台处理的 java 代码,包含前端 html.js.css.字体文件等,过程中解决了访问 jar 包里的静态资源问题,所以记录下来. 附:自己的一 ...

随机推荐

  1. One take,可望而不可即

    One take,是几年之前看综艺节目听林志炫提到的一个词,就是说录制一首歌曲一次性完成,无需后期的各种修音.这个概念听起来就很酷,对不对? 作为一个程序员,我经常也希望能够One take:一次性把 ...

  2. TestNG安装及使用

    安装:https://www.cnblogs.com/xusweeter/p/6559196.html使用:https://www.cnblogs.com/liwu/p/5113936.html 作用 ...

  3. UOJ143 万圣节的数列 构造

    传送门 做过这道题,然后这道题告诉你怎么构造数据-- 一种可行的构造方式是:将奇数和偶数分成两半,奇数放在偶数前面,然后除以2,再递归下去处理. 构造的正确性是显然的:如果存在"奇数偶数奇数 ...

  4. vue slot插槽的使用

    slot插槽的使用场景 父组件向子组件传递dom时会用到插槽   作用域插槽:当同一个子组件想要在不同的父组件里展示不同的状态,可以使用作用域插槽.展示的状态由父组件来决定   注:想要修改父组件向子 ...

  5. DOTween 相关API效果

    1,首先看一遍完整Tween路径 2,操作 DoPlay->DoRestart,DoRestart是从调用时刻重新开始开始执行Tween 3,操作 DoPlay->DoReWind,DoR ...

  6. HP 1010、 1020、 1022 、M1005激光打印机内部无卡纸,但机器仍提示卡纸?

    HP 1010.1018.1020.1022.M1005激光打印机,硒鼓原装编号:Q2612A  1800页 ( A4纸,5%覆盖率).是办公桌面小型打印机中主流产品,故障率极小. 现有一台HP 10 ...

  7. [BZOJ 4819] [SDOI 2017] 新生舞会

    Description 学校组织了一次新生舞会,Cathy作为经验丰富的老学姐,负责为同学们安排舞伴. 有 \(n\) 个男生和 \(n\) 个女生参加舞会买一个男生和一个女生一起跳舞,互为舞伴. C ...

  8. win+R启动列表

    屌丝才用windows,无奈~ """ Win+R 快速启动的命令: 系统应用程序: calc - 启动计算器 charmap - 启动字符映射表 chkdsk - Ch ...

  9. elastalert

    http://blog.51cto.com/kexiaoke/1977481 什么是? ElastAlert是一个简单的框架,用于从弹性搜索中的数据中提取异常,尖峰或其他感兴趣的模式.在Yelp,我们 ...

  10. python之OpenCv(三)---基本绘图

    opencv 提供了绘制直线.圆形.矩形等基本绘图的功能 1.绘直线 cv2.line(画布,起点坐标,终点坐标,颜色,宽度) 例如: cv2.line(image,(20,60),(300,400) ...