CSS设置文本样式（二）

最新推荐文章于 2022-03-06 17:35:29 发布

在到处之间找我

最新推荐文章于 2022-03-06 17:35:29 发布

阅读量263

点赞数

分类专栏： # CSS学习笔记文章标签： font-family属性 font-size属性 font-style属性 font-weight属性 text-shadow属性

本文链接：https://blog.csdn.net/sinat_41104353/article/details/79455787

版权

CSS学习笔记专栏收录该内容

12 篇文章 1 订阅

订阅专栏

字体名称

font-family属性规定元素的字体系列

font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。也就是说，font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。

有两种类型的字体系列名称：

指定的系列名称：具体字体的名称，比如："times"、"courier"、"arial"。
通常字体系列名称：比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"

提示：使用逗号分割每个值，并始终提供一个类族名称作为最后的选择。

注意：使用某种特定的字体系列（Geneva）完全取决于用户机器上该字体系列是否可用；这个属性没有指示任何字体下载。因此，强烈推荐使用一个通用字体系列名作为后路。

可能的值

值	描述
family-name generic-family	用于某个元素的字体族名称或/及类族名称的一个优先表。默认值：取决于浏览器。
inherit	规定应该从父元素继承字体系列。

值

描述

family-name
generic-family

用于某个元素的字体族名称或/及类族名称的一个优先表。

默认值：取决于浏览器。

inherit

规定应该从父元素继承字体系列。

<html>
<head>
<style type="text/css">
p.serif{font-family:"Times New Roman",Georgia,Serif}
p.sansserif{font-family:Arial,Verdana,Sans-serif}
</style>
</head>

<body>
<h1>CSS font-family</h1>
<p class="serif">This is a paragraph, shown in the Times New Roman font.</p>
<p class="sansserif">This is a paragraph, shown in the Arial font.</p>

</body>
</html>

值	描述
xx-small x-small small medium large x-large xx-large	把字体的尺寸设置为不同的尺寸，从 xx-small 到 xx-large。默认值：medium。
smaller	把 font-size 设置为比父元素更小的尺寸。
larger	把 font-size 设置为比父元素更大的尺寸。
length	把 font-size 设置为一个固定的值。
%	把 font-size 设置为基于父元素的一个百分比值。
inherit	规定应该从父元素继承字体尺寸。

<html>
<head>
<style type="text/css">
h1 {font-size: 300%}
h2 {font-size: 200%}
p {font-size: 100%}
</style>
</head>

<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>
</body>

</html>

字体样式

font-style属性定义字体的风格

可能的值

值	描述
normal	默认值。浏览器显示一个标准的字体样式。
italic	浏览器会显示一个斜体的字体样式。
oblique	浏览器会显示一个倾斜的字体样式。（倾斜程度比italic小）
inherit	规定应该从父元素继承字体样式。

<html>
<head>
<style type="text/css">
p.normal {font-style:normal}
p.italic {font-style:italic}
p.oblique {font-style:oblique}
</style>
</head>

<body>
<p class="normal">This is a paragraph, normal.</p>
<p class="italic">This is a paragraph, italic.</p>
<p class="oblique">This is a paragraph, oblique.</p>
</body>

</html>

指定字母是否以小型大写字母显示

font-variant属性设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字母与其余文本相比，其字体尺寸更小。

说明：该属性主要用于定义小型大写字母文本。

可能的值

值	描述
normal	默认值。浏览器会显示一个标准的字体。
small-caps	浏览器会显示小型大写字母的字体。
inherit	规定应该从父元素继承 font-variant 属性的值。

<html>
<head>
<style type="text/css">
p.normal {font-variant: normal}
p.small {font-variant: small-caps}
</style>
</head>

<body>
<p class="normal">This is a paragraph</p>
<p class="small">This is a paragraph</p>
</body>

</html>

字体粗细

font-weight属性设置文本的粗细

说明：该属性用于设置显示元素的文本中所用的字体加粗。数字值 400 相当于关键字 normal，700 等价于 bold。每个数字值对应的字体加粗必须至少与下一个最小数字一样细，而且至少与下一个最大数字一样粗。

可能的值

值	描述
normal	默认值。定义标准的字符。
bold	定义粗体字符。
bolder	定义更粗的字符。
lighter	定义更细的字符。
100 200 300 400 500 600 700 800 900	定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
inherit	规定应该从父元素继承字体的粗细。

<html>
<head>
<style type="text/css">
p.normal {font-weight: normal}
p.thick {font-weight: bold}
p.thicker {font-weight: 900}
</style>
</head>

<body>
<p class="normal">This is a paragraph</p>

<p class="thick">This is a paragraph</p>

<p class="thicker">This is a paragraph</p>
</body>

</html>

创建文本阴影

text-shadow属性向文本设置阴影

语法

text-shadow: h-shadow v-shadow blur color;

注释：text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。

可能的值

值	描述	测试
h-shadow	必需。水平阴影的位置。允许负值。	测试
v-shadow	必需。垂直阴影的位置。允许负值。	测试
blur	可选。模糊的距离。	测试
color	可选。阴影的颜色。参阅 CSS 颜色值。	测试

例子

垂直偏移效果的文本阴影

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow:0 30px 0 #FF0000;
}
</style>
</head>
<body>

<h1>垂直偏移效果</h1>

</body>
</html>

偏移后的文本是不可复制的，可以通过隐藏原文本使小说文字不可复制

带有模糊效果的文本阴影

<!DOCTYPE html>
<html>
<head>
<style>
h1 {text-shadow:2px 2px 8px #FF0000;}
</style>
</head>
<body>

<h1>模糊效果的文本阴影！</h1>

</body>
</html>

白色文本上的阴影效果

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color:white;  <!-- 设置文本颜色为白色 -->
text-shadow:0 30px 4px #000000;  <!-- 设置阴影颜色为黑色 -->
}
</style>
</head>
<body>

<h1>白色文本的阴影效果！</h1>

</body>
</html>

<head>
<style>
h1 {
color:white;
text-shadow:0px 30px 4px #000000;
}
</style>
</head>

霓虹灯效果的文本阴影

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow:0 0 3px #FF0000;
}
</style>
</head>
<body>

<h1>霓虹灯效果的文本阴影！</h1>

</body>
</html>

在到处之间找我

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS设置文本样式（二）

字体名称font-family属性规定元素的字体系列font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。也就是说，font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。有两种类型的字体系列名称：指定的系列名称：具体字体的名称，比如："times"、"courier"、"ar...
复制链接

扫一扫