前端CSS3--字体样式

一、font-family设置字体
sans-serif是专指西文中没有衬线的字体
例如：为网页中的文字设置字体为"宋体"。

<style type="text/css">
body{font-family:"宋体",sans-serif;
}
或
body{font-family:"Microsoft Yahei";}
</style>

二、font-size设置字体大小
例如：设置网页中文字的字号为12像素。

<style type="text/css">
body{font-size:12px;
}
</style>

三、font-weight设置字体粗细

<style type="text/css">
p span{font-weight:bold;
}
</style>

四、font-style设置字体样式

<style type="text/css">
p {font-style:italic(斜体);
}
</style>

注意：
1、font-style可以设置字体样式，并且有种3设置方式。
2、正常字体normal,也是font-style的默认值。
3、italic为设置字体为斜体，用于字体本身就有倾斜的样式。
4、oblique为设置倾斜的字体，强制将字体倾斜。
（italic是字体系列(比如宋体，楷体)里的斜体，而oblique是字体倾斜效果，对于没有斜体的字体系列使用oblique实现斜体效果）

五、color设置字体颜色
color的值有3种设置方式：
1、英文命令颜色

p{color:red;}

2、RGB颜色
这个与 photoshop 中的 RGB 颜色是一致的，由 R(red)、G(green)、B(blue) 三种颜色的比例来配色。每一项的值可以是 0~255 之间的整数
例如：

p{color:rgb(133,45,200);}

也可以是 0%~100% 的百分数。如：

p{color:rgb(20%,33%,25%);}

3、十六进制颜色
这种颜色设置方法是现在比较普遍使用的方法，其原理其实也是 RGB 设置，但是其每一项的值由 0-255 变成了十六进制 00-ff。
如：

p{color:#00ffff;}

七、 font样式的简写方式

body{font-style:italic;font-weight:bold; font-size:12px; line-height:1.5em; font-family:"宋体",sans-serif;
}

简写后：

body{font:italic  bold  12px/1.5em "宋体",sans-serif;
}

注意：
1、使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值。
2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。

八、text-decoration添加文本修饰
1、text-decoration默认值为none, 定义标准的文本。
2、text-decoration的值为underline为定义文本下的一条线。
3、text-decoration的值为overline为定义文本上的一条线。
4、text-decoration的值为line-through为定义穿过文本下的一条线，一般用于商品折扣价。

前端CSS3--字体样式相关推荐

CSS3字体样式及高级特效
CSS3字体体现在内部样式<style></style> @font-face { font-family: 必需.规定字体的名称 src: 必需.定义字体文件所在路径 fo ...
前端开发字体样式的演练0229
字体样式样式演练文字垂直居中
博学谷前端 CSS字体样式属性
1.
css3-2 CSS3选择器和文本字体样式
css3-2 CSS3选择器和文本字体样式一.总结一句话总结:是要记下来的,记下来可以省很多事. 1.css的基本选择器中的:first-letter和:first-line是什么意思? :f ...
前端HTML字体和文本样式
前端HTML字体和文本样式文章目录前端HTML字体和文本样式 1.字体样式 1.1字体大小 1.2 字体粗细 1.3 字体样式(是否倾斜) 1.4字体类型 1.5 样式层叠问题 1.6 字体复合属 ...
java 字体选择器_常见CSS3选择器和文本字体样式汇总
常见的CSS3选择器包含:常用基本.属性.伪类.层级(组合)选择器,具体使用情况建议先阅读常用的选择器有:标签.id.类.关联(通过父集找到子集)组合选择器,注意html页面中id是唯一的:基本选择 ...
前端HTML调用jQuery库，属性操作:更换图片、添加字体样式（前端：HTML搭配jQuery系列教程六）
属性操作:更换图片.改变字体样式 1.更换图片: 在jQuery中,我们可以使用attr()方法来获取元素的某一个HTML属性值. 语法: $().attr("属性名") 说明:获 ...
CSS3美化字体样式
1.span标签 span标签是HTML5的行内标签,被用来组合文档中的行内元素. 2.字体样式 font-family:设置字体的类型,常用的字体有宋体.微软雅黑.黑体等,可以设置多个字体中文要记得 ...
前端项目使用指定字体样式
1. 首先在文件中引入字体文件 2. 然后我们再去创建一个css @font-face {font-family: "Bebas"; /* Project id 2878519 * ...
前端如何引入设计给的字体样式
先引入字体包如图所示: 创建公共的字体样式文件,如图所示 css中引入字体包在页面中全局引入font.cs并且使用,如图所示:

前端CSS3--字体样式

前端CSS3--字体样式相关推荐

最新文章

热门文章