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. element+Vue el-form组件进行查询时,当输入框仅有一项时,回车自动提交表单,浏览器会刷新页面

    vue的写法就是el-form上添加阻止默认事件 @submit.native.prevent <el-form ref="queryForm" label-width=&q ...

  2. Installing Superset最新版本安装(笔记)

    官方文档:https://superset.apache.org/docs/installation/installing-superset-from-scratch 由于在centos上安装有各种问 ...

  3. quasar+vue、Input组件绑定两个值

    项目中关于一个只读input绑定两个值,例如input显示取值范围,通过查看vue及quasar文档找出解决方法,如下代码: <q-input v-bind:value="`${det ...

  4. js获取的 后端的列表。

    1.引号被转码 处理办法 {% autoescape off %} var tmp = '{{ data1 }}'; var tmp = '{{ data2 }}'; {% endautoescape ...

  5. 西湖论剑2023-mp3[wp]

    一 题目描述 二 解题步骤 1.分析文件 (1)放入Audacity中查看频谱信息无果 (2)010editor中查看文件结构 文件尾部存在PNG文件尾,搜索png文件头 将该png文件复制提取出来, ...

  6. k8s暂停一个pod

    模拟k8s暂停一个服务:kubectl scale --replicas=0 deployment/[deployment]  -n [namespace](如要恢复设置参数--replicas=1即 ...

  7. Linux系统Shell脚本第二章:条件测试、正整数字符串比较与if、case语句

    目录 一.条件测试 1.三种测试方法 2. 正整数值比较 3.字符串比较 4.逻辑测试 二.脚本中常用命令 1.echo命令 2.date命令 3.cal命令 4.tr命令 5.cut命令 6.sor ...

  8. 无线网络技术 实验2 无线网络环境RSSI测试实验

    1.实验目的与要求 ①.了解RSSI的概念和基本原理 ②.掌握RSSI测量过程和方法 ③.不同无线环境下RSSI值测量 2.实验仪器材料:个人计算机 Windows操作系统 个人热点 3.实验过程记录 ...

  9. Chrome浏览器提示您的连接不是私密连接解决办法

    解决方案: 是在当前页面用键盘输入 thisisunsafe ,不是在地址栏输入,就直接敲键盘就行了,页面即会自动刷新进入网页. 原因: 因为Chrome不信任这些自签名ssl证书,为了安全起见,直接 ...

  10. Task :app:lintVitalRelease FAILED

    错误信息:Task :app:lintVitalRelease FAILED 问题原因:dl.google.com 无法连接 解决办法: 修改hosts(推荐)通过在线查询ip网站,找到dl.goog ...