一、font-style属性(文字样式):
主要记住两个值:normal与italic
1.normal:正常的,就是默认状态下的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文字相关的属性</title>
<base target="_self">
<style type="text/css">
p{
font-style: normal;
}
</style>
</head>
<body>
<p>我是段落</p>
</body>
</html>
2.italic:倾斜的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文字相关的属性</title>
<base target="_self">
<style type="text/css">
p{
font-style: italic;
}
</style>
</head>
<body>
<p>我是段落</p>
</body>
</html>
二、font-weight属性(文字粗细):
最重要的值为:bord(粗)、border(很粗)。
1.bord与border用法相同
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文字相关的属性</title>
<base target="_self">
<style type="text/css">
p{
font-weight: ;
}
</style>
</head>
<body>
<p>我是段落</p>
</body>
</html>
三、font-size属性(文字的大小):
可以自己直接输入所要的文字的大小,如:100px、20px.......
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文字相关的属性</title>
<base target="_self">
<style type="text/css">
p{
font-size: 100px;
}
</style>
</head>
<body>
<p>我是段落</p>
</body>
</html>
四、font-family属性(文字字体):
(1)中文字体:包含英文字体,可以处理和渲染英文字体。
(2)英文字体:不包含中文字体,不可以处理和渲染中文字体。
遇到的四种情况:
1.
<style>
p
{
font-family:"英文字体";
}
</style>
<body>
<p>abc我是段落abc</p>
</body>
文中的abc会被渲染成“英文字体”,但是“我是段落”不会被渲染。
2.
<style>
p
{
font-family:"中文字体";
}
</style>
<body>
<p>abc我是段落abc</p>
文中的abc和“我是段落”都会被渲染成“中文字体”。
3.
<style>
p
{
font-family:"中文字体","英文字体";
}
</style>
<body>
<p>abc我是段落abc</p>
文中的abc和“我是段落”都会被渲染成中文字体,因为中文字体能处理中英文,所以用不到后面的备选方案“英文字体”。
4.
<style>
p
{
font-family:"英文字体","中文字体";
}
</style>
<body>
<p>abc我是段落abc</p>
文中的abc会被渲染成“英文字体”,“我是段落”会被渲染成“中文字体”。因为“英文字体”只能处理渲染英文,不能渲染中文,所以当英文字体处理不了的时候,运行备选字体,备选字体“中文字体”开始进行渲染,渲染“我是段落”。
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文字相关的属性</title>
<base target="_self">
<style type="text/css">
p{
font-size: 100px;
font-family: "Times New Roman","微软雅黑";
}
</style>
</head>
<body>
<p>abc我是段落abc</p>
</body>
</html>
总结:
如果你想单独处理文中的英文,那么把英文字体写在前面,中文字体写在后面。
font-family:"英文字体","中文字体";
这样文中的中文和英文就分开渲染了,中文被“中文字体”渲染,英文被“英文字体”渲染。