字体样式字体分类字体样式二

字体样式&字体分类&字体样式二

字体样式

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">.p1 {/* 设置字体颜色，使用color来设置文字的颜色color：red;*//* 设置文字的大小，浏览器中一般默认的文字大小都是16pxfont-size 设置的并不是文字本身的大小在页面中，每个文字都是处在一个看不见的框中设置的 font-size 实际上是设置格的高度，并不是字体的大小一般情况下文字都要比这个格要小一些，有时也会大根据字体的不同，显示效果也不同*/font-size: 30px;/* 通过font-family 可以指定文字的字体当采用某种字体时，如果浏览器支持则使用该字体，如果不支持该字体，浏览器会使用默认的字体该样式可以同时指定多个字体，多个字体之间使用 , 隔开当采用多个字体时，浏览器会优先从左到右依次检查并使用如果前一个字体浏览器不支持，默认检查后一个字体，如果都不支持将会使用默认字体*/font-family: "curlz mt", arial, 微软雅黑;/*  浏览器使用的字体默认就是计算机中的字体，如果计算机中有，则使用，如果没有就使用默认字体*/}</style>
</head><body><p class="p1">我是P标签,123abc</p>
</body></html>

字体分类

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">/*  使用位置一般在文字样式中进行兜底如下:使用"sans-serif" 字体分类用来兜底*/p {font-family: Arial, Helvetica, sans-serif;}</style></head><body><!--  在网页中将字体分成5大类serif（衬线字体）sans-serif（非衬线字体）monospace（等宽字体）cursive（草书字体）fantasy（虚幻字体）可以将字体设置为这些大的分类，当设置为大的分类以后，浏览器会自动选择指定的字体并应用样式--><p style="font-size: 50px; font-family: serif;">我是衬线字体</p><p style="font-size: 50px; font-family: sans-serif;">我是非衬线字体</p><p style="font-size: 50px; font-family: monospace;">我是等宽字体</p><p style="font-size: 50px; font-family: cursive;">我是草书字体</p><p style="font-size: 50px; font-family: fantasy;">我是虚幻字体</p>
</body></html>

字体样式二

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style class="text/css">.p1 {color: red;font-size: 30px;font-family: "微软雅黑";/*  font-style可以用来设置文字的斜体可选值：normal，默认值，文字正常显示italic 文字会以斜体显示oblique 文字会以倾斜的效果显示*/font-style: oblique;/*  font-weight 可以用来设置文本的加粗效果：可选值：normal，默认值，文字正常显示bold ，文字加粗显示*/font-weight: bold;/*  font-variant 可以用来设置小型大写字母可选值：normal ，默认值，文字正常显示small-caps 文本以小型大写字母显示*/font-variant: small-caps;}.p2 {/* 设置一个文字大小 */font-size: 50px;/* 设置一个字体 */font-family: 华文彩云;/* 设置文字斜体 */font-style: italic;/* 设置文字的加粗 */font-weight: bold;/* 设置一个小型大写字母 */font-variant: small-caps;}.p3 {/* 在css中还为我们提供了一个样式叫font使用该样式可以同时设置字体相关的所有样式,可以将字体的样式的值，统一卸载font样式中，不同的值之间使用空格隔开使用font设置字体样式时，斜体 加粗 小大字母，不同的值之间使用空格隔开*/font: italic small-caps bold 70px "微软雅黑";}</style>
</head><body><p class="p1">我是一段p标签文字</p><p class="p2">我是一段p标签文字</p><p class="p3">我是一段p标签文字</p>
</body></html>

字体样式字体分类字体样式二相关推荐

设计字体时字体性格的分类表现（二）
4.可爱卡通型可爱卡通的字体字形的处理方式较为多样,可以通过笔画本身的圆润性表现出可爱的字体性格,也可以通过结构的整合,使字体产生可爱的性格. 印品囧囧体 5.轻松随性型轻松随性的字体字形偏向于日 ...
css字体的分类及样式
一.分类在网页中将字体分成五大类: serif(衬线字体) sans-serif(非衬线字体) monospace (等宽字体) cursive (草书字体) ...
绘制pdf表格 (二) 通过itext实现在pdf中绘制excel表格样式设置中文字体、水印、logo、页眉、页码
前言在<通过itext实现在pdf中绘制excel表格样式并且实现下载>实现了表格的基本渲染,本文将继续进行水印.logo.页眉.页码的设置,本文的部分代码包含<通过itext实现 ...
CSS字体、行高等其他样式
CSS字体.行高等其他样式一.长度单位与颜色单位 1. 长度单位 <!DOCTYPE html> <html lang="en"><head> ...
给Android Studio设置代码字体大小与界面字体样式
前言使用android studio第一步肯定就是设置字体大小了,废话不多说,直接上教程: 初始界面: 更改后界面: 目录更改代码字体大小更改界面字体大小及样式一.更改代码字体大小 File ...
修改表格字体颜色_CAD表格文字样式失灵？不，你错了
CAD也疯狂最近有网友私信,说是插入CAD表格文字样式失灵,不受文字样式控制,插入表格后字体仍然是表格原来的字体.其实CAD插入表格中的文字也是受文字样式控制的,在设置表格样式的时候可以设置使用哪种 ...
WPF自定义控件与样式(1)-矢量字体图标(iconfont)
原文:WPF自定义控件与样式(1)-矢量字体图标(iconfont) 一．图标字体图标字体在网页开发上运用非常广泛,具体可以网络搜索了解,网页上的运用有很多例子,如Bootstrap.但在C/S程序 ...
CSS中颜色、样式规则（字体样式、列表样式、表格样式）
目录一.CSS中的颜色设置 1.颜色的表示方式 (1).颜色名 (2).rgb函数 (3).十六进制表示(HEX 值) 二.CSS样式规则 1.字体规则 (1) font-family属性:字体 ...
【CSS】CSS 文本样式 ② ( font 字体设置 | CSS 2.0手册使用 | font-weight 字体粗细设置 | font-style 字体斜体设置 | font 字体样式综合写法 )
文章目录一. CSS 2.0手册使用 1. 按照文档层次查找 2. 搜索关键字查找文档二. font-weight 字体粗细设置 1. 语法简介 2. 代码示例三. font-style 字体斜 ...

字体样式字体分类字体样式二

字体样式&字体分类&字体样式二

字体样式

字体分类

字体样式二

字体样式字体分类字体样式二相关推荐

最新文章

热门文章