font-family 
指的是字体比如 “宋体”,“微软雅黑”等等

具体字体:微软雅黑、宋体、黑体、宋体等等

字体系列:sans-serif、serf、monospace等

常见字体系列(了解):

1 无衬线字体(sans-serif)

特点:文字笔画粗细均匀,并且首尾无装饰

使用场景:网页中大多采用无衬线字体

常见该系列字体:黑体、Arial

2 衬线字体(serif)

特点:文字笔画粗细不均匀,并且首尾有笔锋装饰

使用场景:报刊书籍中广泛应用

常见该系列字体:宋体、Times New Roman

3 等宽字体(monospace)

特点:每个字母或文字的宽度相等

使用场景:一般用于程序代码编写,有利于代码的阅读和编写

常见该系列字体:Consolas、fira code
渲染规则:

1 从左到右,如果电脑未安装该字体,则显示下一个

2 如果都不支持,电脑会根据操作系统显示默认字体

注意:

1 如果字体名称中存在多个单词,推荐使用引号包裹

2 最后一项字体系列不需要引号包裹

3 网页开发时,尽量使用常见字体,保证不同浏览器显示正常

font-style
指定的是字体倾斜与否,italic 属性值是通过字体本身倾斜,oblique 属性值让字体倾斜一定角度,看起来效果一样,但是对于有些字体,可能原先不能倾斜,所以设置 italic 属性值不生效,设置成 oblique 就生效了。它的值有:normal(默认值)、italic(斜体)、oblique(倾斜)

font-weight 

定义了字体的宽度,属性值 lighter细,bold粗,bolder更粗,当然也可以设置具体数值100~900,只能是整百。

关键字 normal(正常) bold(加粗)

纯数字 100~900的整百数  400(正常)  700(加粗)

font-variant 

此属性的作用就是将文字转换成大写后缩小

font-size

数字+px,谷歌浏览器默认文字大小为16px,单位需要设置,否则无效。

字体样式font-style的更多相关文章

  1. css字体样式(Font Style),属性

    css字体样式(Font Style),属性   css字体样式(Font Style)是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者 ...

  2. css文本样式text、字体样式font

    文本样式text 1.文本颜色color 例如h1 {color:red;} 2.文本方向direction,不常用 默认ltr从左到右,rtl表示从右到左 3.文本水平对齐方式text-align ...

  3. css 字体样式设置大全

    css样式大全(整理版)   字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 样式 { ...

  4. css 字体样式设置

    css字体样式(Font Style),属性 时间:2014-05-08 21:49 来源:我爱学习网 | 作者:我爱学习网 | 本文已影响 68353 人   css字体样式(Font Style) ...

  5. css字体样式

    css字体样式(Font Style) 属性       css文本样式 序号 中文说明 标记语法 1 字体样式 {font:font-style font-variant font-weight f ...

  6. vue 动态添加 <style> 样式 vue动态添加 绑定自定义字体样式

    created(){ //动态添加自定义字体样式 let style = document.createElement('style'); style.type = "text/css&qu ...

  7. Python 45 长度及颜色单位 、字体样式 、文本样式 、背景样式 、css基础选择器

    一:长度及颜色单位   长度单位       px(像素)        in(英寸)       pt(点),一个标准的长度单位,1pt = 1/72in       mm(毫米)       cm ...

  8. 常见CSS3选择器和文本字体样式汇总

    常见的CSS3选择器包含:常用基本.属性.伪类.层级(组合)选择器,具体使用情况建议先阅读css选择器四大类:基本.组合.属性.伪类对于选择器的使用有一个基本了解,选择器的作用在于通过它找到元素,并且 ...

  9. CSS3初学篇章_3(属性选择符/字体样式/元素样式)

    属性选择符  选择符  说明  E[att]  选择具有att属性的E元素.  E[att="val"]  选择具有att属性且属性值等于val的E元素.  E[att~=&quo ...

  10. css常用样式font控制字体的多种变换

    CSS 字体属性定义文本的字体系列.大小.加粗.风格(如斜体)和变形(如小型大写字母)font-family控制字体,由于各个电脑系统安装的字体不尽相同,但是基本装有黑体.宋体与微软雅黑这三款字体,通 ...

随机推荐

  1. P9033题解

    P9033「KDOI-04」XOR Sum 题解 题目链接 传送门 题意简述 构造一个长度为 \(n\),值域为 \([0,m]\) 的异或和为 \(k\) 的序列,如果不存在则输出 \(-1\). ...

  2. 第1关—print()函数与转换

    Print()函数的用法有以下几种:单枪匹马--不带引号.搭配单引号.搭配双引号.搭配三引号,我们逐个见识下吧!  1.无引号       注意,这里的括号一定要用[英文括号],不然会报错 impor ...

  3. rocketmq-exporter部署(干货)

    简单介绍 rocketmq_exporter是prometheus提供的用于监控rocketmq运行状态的exporter 环境 系统 版本 CentOS 7.6.1810 (Core) CPU/内存 ...

  4. react 本地 DevServer启动之后找不到静态资源404

    起因:更改路由嵌套方式,基础路径不是 '/' 本地启动项目之后 请求静态资源404,前边加了路由路径, 原因:打包之后相对路径改变了,解决:在output里的publicPath :'/'

  5. 【实验】B站资源免费下载技巧you-get

    搭建环境, python pip3  install you-get 查看可以下载格式 you-get -i https://www.bilibili.com/video/BV1yN411d7KH?p ...

  6. mybatis中多条件模糊查询不显示数据的问题

    在写查询语句时:

  7. 何同学新视频火了!找到减少沉迷手机的最佳方法:附免费APP

    以优质原创视频吸引百万粉丝的 Up 主"何同学"昨晚(1 月 6 日)上线了最新作品,探讨了如何有效地减少现代人使用或者说沉迷手机的时间. 在视频开头,何同学提到,整理了 5000 ...

  8. vue+vant-ui移动端适配 宽高

    一:在vue中安装vant 1.npm i vant -S 2.npm i babel-plugin-import -D // 在.babelrc 中添加配置 { "plugins" ...

  9. vue学习之-----组件递归调用

    1.关键点 2.父组件 <template> <div> <div class="btn-title"> <el-button @clic ...

  10. docker-compose任务编排

    一.docker-compose介绍 使用一个Dockerfile模板文件可以定义一个单独的应用容器,如果需要定义多个容器就需要服务编排.下面介绍Docker官方产品,Docker Compose. ...