文章目录 一、 CSS 2.0手册使用 1、 按照文档层次查找 2、 搜索关键字查找文档 二、 font-weight 字体粗细设置 1、 语法简介 2、 代码示例 三、 font-style 字体斜体设置...1、 语法简介 2、 代码示例 四、 font 字体样式综合写法 1、 语法简介 2、 代码示例 ① 不使用综合字体样式的代码 ② 使用综合字体样式的代码 ③ 执行效果 一、 CSS 2.0手册使用...---- 1、 按照文档层次查找 CSS 的使用方法可在 CSS 2.0 手册 中查询 ; 这里以 查询 font-weight 字体粗细设置 为例 , 在文档左侧的 " 属性 | 字体 | font-weight..., 搜索该属性 ; 二、 font-weight 字体粗细设置 ---- 1、 语法简介 在 HTML 中可以使用 b strong ( 推荐使用 ) 标签 , 实现 文本粗体显示 ; 如果 使用...标签 粗体显示 , 则可以使用 CSS 设置其 不加粗 ; 在 CSS 中 , 可使用 font-weight 设置 字体粗细 ; font-weight 属性值设置 : normal : 默认不加粗样式
今天，在 CodePen 上看到一个很有意思的效果 -- GSAP 3 ETC Variable Font Wave，借助了 JS 动画库 GSAP 实现，一起来看看： 我寻思着能否使用 CSS 复刻一版...scale 是等比例放大缩小一个物体，而仔细观察上述效果，明显是有字体的粗细、字体的字宽的变化。这里，其实用到了 CSS 比较新的特性 -- 可变字体，也就是 font-variation。...下面，我们将加载一个支持字体粗细从 100 到 900，字体伸缩变形支持从 10% 到 400% 的 AnyBody 可变字体。...例如‘字重轴’描述了字体的粗细；“宽度轴”描述了字体的宽窄；“斜体轴”描述是否使用斜体字形并且可相应地开关；等。请注意，轴既可以是范围选择又可以是开关选择。...-02-20） 现在能够开始使用可变字体了吗？
二、font-family（字体类型） 我们常说的宋体、楷体等就是字体类型。 在CSS中，使用font-family属性定义字体类型。...三、font-size（字体大小） 在CSS中，使用font-size属性来定义字体大小。...（2）px像素值 关于px是什么，请看我的另一篇文章01-CSS基础。 四、font-weight（字体粗细） 在CSS中，使用font-weight属性来定义字体粗细。...注意，字体粗细跟字体大小是完全不一样的，可千万不要弄混了，粗细指“肥瘦”，大小指“宽高”。...六、color（字体颜色） 在CSS中，可以使用color属性来定义字体颜色。
字体粗细 可以使用font-family属性定义文档采用的优先字体系列。...CSS3服务器端字体 在CSS3之前，Web设计师必须使用已在用户计算机上安装好的字体。...现在通过CSS3 @font-face，Web设计师可以使用他们喜欢的任意字体，并将该字体文件存放到Web服务器上，用户在访问页面时，字体会在需要时被自动下载到用户的计算机上。...定义如何拉伸字体。默认是"normal" font-style ormal、italic、oblique 可选。定义字体的样式。...默认是"normal" font-weight normal、bold、100、200、300、400、500、600、700、800、900 可选。定义字体的粗细。
CSS是一种描述HTML文档样式的语言,CSS描述应该如何显示HTML元素。 CSS的主要使用场景是美化页面，布局页面。 CSS语法规范 使用HTML时，需要遵从一定的规范，CSS也是如此。...长名称或词组可以使用中横线来为选择器命名 不要使用纯数字、中文等命名，尽量使用英文字母来表示 多类名，每个类名必须使用空格分开 命名要有意义，尽量使别人一眼就知道这个类名的目的。...;} 通配符选择器 选择所有标签 选择的太多，很多不需要 特殊情况使用 *{color:red;} 字体 字体属性 CSS Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式（如斜体）...（chrome浏览器默认文字大小为16px），我们尽量给一个明确大小 可以给body标签指定整个页面大小 字体粗细 CSS 使用font-weight属性设置文本字体的粗细。...属性，否则font属性将不起作用 字体属性总结 属性值 表示 注意点 font-size 字号 通常使用px（像素）必须跟上单位 font-family 字体 按要求写字体 font-weight 字体粗细
3.CSS文本相关样式 3.1 font-size 字号大小 它的属性用于设置字号 相对长度 em px 最常用，推荐使用 3.2 font-family 字体 它的属性用于设置字体 p{font-size...:"微软雅黑”} 可以同时指定多个字体，中间用逗号隔开 各种字体之间必须使用英文的逗号隔开 3.3 font-weight ：字体粗细 字体加粗除了用 b 和 strong 标签之外，可以使用CSS 来实现...font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900（100的整数倍）。...font-style:字体风格 字体倾斜除了用 i 和 em 标签之外，可以使用CSS 来实现，但是CSS 是没有语义的。...4.CSS文本外观属性 1.color 文本颜色 2.letter-spacing: 字体间距 属性为normal 或px em 允许负值 3…word-spacing:单词间距 中文字体无效
类选择器 3.3 id选择器 3.4 通配符选择器 4、字体样式 4.1 字体大小 4.2 字体粗细 4.3 字体样式（是否倾斜） 4.4 字体系列 5、文本样式 5.1 文本缩进 5.2 文本水平对齐方式...开发中使用极少，只会在极特殊情况下才会用到 效果： 4、字体样式 字体大小 font-size 字体粗细 font-weight 字体样式 font-style 字体类型 font-family...4.2 字体粗细 属性名 font-weight 取值 关键字： 正常——>normal 加粗 ——>bold纯数字：100~900的整百数：正常——>400 加粗 ——>700 注意点 不是所有字体都提供了九种粗细...关键字： 正常——>normal 加粗 ——>bold 纯数字：100~900的整百数：正常——>400 加粗 ——>700 注意点 不是所有字体都提供了九种粗细，因此部分取值页面中无变化 实际开发中以...如果字体名称中存在多个单词，推荐使用引号包裹 2. 最后一项字体系列不需要引号包裹 3.
二、css字体、文本属性 css学前小知识： 一张图片的打印出来的实际尺寸是由电子图片的像素和分辨率共同决定的，像素(Pixel)是指构成图片的小色点，分辨率(单位DPI)是指每英寸(Inch)上的像素数量...多学一招：（1）取值用偶数（2）默认是16px大小（3）字体有多大，看字体的高度 b) font-weight 设置字体的粗细 取值：normal 正常的（400）、bold加粗（700）、bolder...(900) 、 100 - 900（字体的粗细没有那么精细，所以很少使用数字） 示意图 ?...多学一招： 1.不推荐使用一些冷门字体，因为一些冷门字体很多电脑里面默认没有安装，这个时候就会显示不出来。所以实际工作中，默认都是一些主流字体 如宋体 微软雅黑 等。。。...d) 首行缩进 语法：text-indent:值 取值：可以是像素，但是当文字大小发生改变后，也需要重新改变，可以使用em代替，代表字符，会随着文字大小的改变而自动调整 示意图 ?
CSS字体样式属性 font-size:字号大小 font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。...尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。 CSS Unicode字体 在 CSS 中设置字体名称，直接写中文是可以的。...，我们尽量只使用宋体和微软雅黑中文字体 font-weight:字体粗细 字体加粗除了用 b 和 strong 标签之外，可以使用CSS 来实现，但是CSS 是没有语义的。...font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900（100的整数倍）。...font-style:字体风格 字体倾斜除了用 i 和 em 标签之外，可以使用CSS 来实现，但是CSS 是没有语义的。
这五类字体族不代表某一个具体的字体，而是当你在 CSS 中指定字体族的时候，系统就有可能在字体族中找出一种字体来显示。 ?...在设置字体是否加粗时，属性值既可以直接填写 100 至 900 这样的数字，也可以填写normal、bold这样的单词。normal的值相当于 400，bold的值相当于 700。...实际上，所有这些数值关键字浏览器都是支持的，之所以没有看到任何粗细的变化，要看你所使用的字体是否支持。...就拿“微软雅黑”这个字体来举例，它只支持两种粗细，所以当你在代码里写成500的时候，也会被认为是400。但是 Mac 上的“苹方”字体，就支持至少六种粗细。...但是十年之后，我把这些设计和创意融入到了 Mac 电脑之中，这也使这台 Mac 成为了第一台拥有漂亮字体的电脑。 而当 Windows 系统借鉴了Mac之后，大家都觉得，所有的电脑都应该是这个样子。
字体大小 font-size 设置字体的大小 ,px 是一个单位，代表屏幕的上的像素，在css大多数数值都需要添加单位 font-size: 12px; 字体粗细 font-weight 设置字体的粗细...，取值：默认(normal) 、加粗(bold)、 100 - 900 font-weight:bold 因为字体在初始设计的时候就没有设置太多的粗细标准，用数字设置的时候，只有在400和700会产生变化...，在实际工作中 用的最多的就是normal(400） bold（700） 字体风格 font-style 设置字体的风格(样式) 取值：normal 默认 显示标准的字体样式 italic 字体倾斜...font-family:"宋体"; 字体可以写多个，中间用逗号隔开，浏览器会从左到右依次解析，直到识别出当前电脑安装的字体则直接使用,字体名称中如果有空格 # $ 这种特殊字符的时候需要添加上引号 中文字体也需要添加引号...行高控制的是文字与文字之间的上下距离 （行距） line-height:值; 值的取值是像素 **小技巧：如果将标签的高度和行高设置成一样，那么这个标签里面的文字可以在这个标签里面垂直居中 两者结合使用可以让单行文字在标签内部水平垂直居中
css有哪些字体文本样式 1、font-family字体类型。可以同时声明多种字体，用逗号分隔开。 中文，楷体，需要双引号引起来。...、顺序设置 2、font-weight 指定了字体的粗细程度。...font-weight: bolder; /* 加粗体 */ font-weight: lighter; /* 细体 */ font-weight: 400; /* 数字100-900.../*例如*/ text-indent: 40px; 以上就是css字体文本样式的介绍，希望对大家有所帮助。...更多css学习指路：css教程 本文教程操作环境：windows7系统、css3版，DELL G3电脑。
这五类字体族不代表某一个具体的字体，而是当你在 CSS 中指定字体族的时候，系统就有可能在字体族中找出一种字体来显示。 ?...操作系统上使用苹果的“苹方”字体，在 Windows 系统上用微软雅黑字体，如果这两个字体都没有，就随便找一个无衬线体进行显示。...在设置字体是否加粗时，属性值既可以直接填写 100 至 900 这样的数字，也可以填写normal、bold这样的单词。normal的值相当于 400，bold的值相当于 700。...实际上，所有这些数值关键字浏览器都是支持的，之所以没有看到任何粗细的变化，要看你所使用的字体是否支持。...就拿“微软雅黑”这个字体来举例，它只支持两种粗细，所以当你在代码里写成500的时候，也会被认为是400。但是 Mac 上的“苹方”字体，就支持至少六种粗细。
CSS简介：CSS是层叠样式表的简称，有时也会称之为CSS样式表或级联样式表。...，中文，标签名作为类名）使用的时候，class前面加符号.语法如下：.类名{ k:v}一个标签页可以使用多个类名；在标签的class属性中，写多个类名，以空格分开；id选择器是通过标签的Id属性值作为选择器...，id以#开始；其他与类选择器类似；相比类选择器，id可以表示一个标签，id只能使用一次；通配符选择器使用*定义，它表示选取页面所有的元素；图片CSS字体属性字体属性用于定义字体系列，大小，粗细和文字样式等...；字体系列：font-family字体大小： font-size; 大小以px(像素)为单位；谷歌浏览器默认的大小为16px; 一般情况下给body添加此属性；标题标签特殊设置字体粗细：font-weight...: 常用值 normal(400) bold(700) bolder和数字(100-900) 文字样式： font-style 常用值normal和italic字体复合属性：font {font-style
https://v.qq.com/x/page/z3154dgo2ta.html font样式值的顺序 一般使用font样式，样式值的顺序为：字体风格→字体粗细→字体大小→字体类型 其实除了这四个，还有其它的可选项...示例： font: oblique 900 20px "Times"; ? 少了font-size与font-family是不可以的。...font-variant> 具体规则 font-style, font-variant 和 font-weight 必须在 font-size 之前 在 CSS...font-family'> ] 示例： font: oblique small-caps 100 5em/30px "Times"; font-variant 变形 font-variant-caps 使您可以控制大写字母特殊字符的使用...另一种字体拉伸效果的实现方式是： transform: scale(2,1); scale可以接受1个参数，也可以接受2个参数。
在 Canvas API中，我们可以使用 fillStyle 属性设置填充颜色，可以使用 font 属性指定文本的字体和字号。...font-weight 的选项共有9个级别（即100~900）或 4个预定义名称（即 normal、bold、bolder和lighter）。...这里使用常量有两个好处：一，使程序代码解耦，在一个地方修改常量，就可以影响多处；二，常量不可更改，初始化之后，可以放心大胆使用。...实践疑难点 font-weight一般建议直接使用绝对粗细的数字值，而不是相对粗细的名称值。在网页的根元素设置的font-weight不同的，所有子元素的相对值都会受到影响。...不只是font-weight这一个CSS样式如此，其它CSS样式也有相同的问题，都需要注意。 设置font-family样式时，要注意使用真正的英文符号名称，而不是常见的中文名称。
示例： 看看我是如何转换的 hello CSS 看看我是如何转换的...: lowercase;">看看我是如何转换的 hello CSS 效果： 文本溢出 在 CSS 中，可以使用 overflow 属性来处理文本溢出。...; ">hello CSS hello CSS 效果： 大小 CSS 中字体大小可以使用 font-size 属性来设置。...通常，行高可以设置为字体大小的 1.4 到 1.6 倍。 粗细 CSS 中字体粗细可以使用 font-weight 属性来设置。 normal: 默认字体粗细。 bold: 加粗字体。...bolder: 相对于父元素更粗的字体。 lighter: 相对于父元素更细的字体。 数字值：使用数字值来设置字体的粗细，数字值范围通常从 100 到 900。
学习目标 css的作用和基本语法 css控制字体 基本选择器 伪类选择器 行高和对齐方式 css其他属性 首行缩进、字体下划线等 css的概念及其作用 css全称为（Cascading Style Sheets...3: 值3; } 注意：符号必须是英文状态下的 字体属性 设置字体的大小 font-size 设置字体的大小 取值：font-size: 12px; 注意：在css大多数数值都需要添加单位 设置字体的粗细...font-weight 设置字体的粗细 取值：normal 、bold、 100 - 900 多说一嘴：用数字设置的时候，只有400和700会产生变化，是因为字体在初始设计的时候就没有设置太多的粗细标准...等等 多说一嘴： 不推荐使用一些冷门字体，因为一些冷门字体很多电脑里面默认没有安装，这个时候就会显示不出来。所以实际工作中，默认都是一些主流字体 如宋体 微软雅黑 等。。。...一定要学会使用 作用：调试代码 检测代码的！！
css教程之文本字体 一、字体 1、font-size 字体大小 div{font-size:16px;} 2、font-weight 字体粗细 normal 正常的字体。...bolder 定义比继承值更重的值 lighter 定义比继承值更轻的值 ：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900...;} 4.font-style：normal | italic | oblique 字体样式 div{ font-style:italic; } 5.字体颜色 color...div{color:#f60;} 二、文本Text 1.white-space 指定元素是否保留文本间的空格、换行；指定文本超过边界时是否换行。...该值适合包含一些非亚洲文本的亚洲文本，比如使连续的英文字符断行。 3.text-align 定义元素内容的水平对齐方式。 left：内容左对齐。 center：内容居中对齐。
字体样式属性 1.1 字体样式（font-family） 1.2 字体大小（font-size） 1.3 字体粗细（font-weight） 1.4 文字样式（font-style） 1.5 字体复合属性...字体样式属性 CSS Fonts（字体）属性用于定义字体系列，大小，粗细和文字样式（如斜体）。 1.1 字体样式（font-family） font-family属性用于设置字体。...运行结果： 小结： 各种字体之间必须使用英文状态下的逗号分隔； 一般情况下，如果有空格隔开的多个单词组成的字体，加引号； 尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示。...（font-weight） font-weight属性用于定义字体的粗细，其可用属性值如表： 值 描述 normal 默认值。...按照实际需求写字体 font-weight 字体粗细 加粗是700 或者 bold 不加粗是 normal 或者 400 数字不要跟单位 font-style 字体样式 倾斜是 italic 不倾斜是
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
