06---HTML+CSS---字体与文本

最新推荐文章于 2020-11-28 06:22:52 发布

好大的汪汪

最新推荐文章于 2020-11-28 06:22:52 发布

阅读量237

点赞数

分类专栏： html css

本文链接：https://blog.csdn.net/chishuiss/article/details/79193429

版权

css 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

html

8 篇文章 0 订阅

订阅专栏

一、字体来源

1、一般能在网页看到的字体，都是你电脑中安装过的字体。
2、保存在第三方网站(通过链接的方式引入,类似于.css)
3、保存在服务器(使用@font-face引入，较少见)

二、字体属性

1、font-family

规定网页上的字体。

<head>
    <style>
        p{font-family:"微软雅黑";}
    </style>
</head>

英文字体对中文不生效，比如很秀的Vivaldi… …写不出很秀的我爱你。

font-family:"a",b,c,d;

后面有多种字体的意思是，万一你电脑上没有a字体，可以显示b,以此类推，bcd都是备用的。

2、font-size

字的大小

单位：px % em

绝对单位：px
相对单位：em

浏览器默认样式表在设定所有元素的字体大小时使用的都是相对单位em。默认情况下，1em=16px。可以改变。

<head>
    <style>
        *{margin:0;padding:0;}
        body{font-size:200%;}
    </style>
</head>
<body>
    <h1>最大的标签</h1>
</body>

h1默认值是2em。实际上font-size=200%改变的是默认值1em=16px，改成了1em=32px。所以此时的h1是64px。

<head>
    <style>
        *{margin:0;padding:0;}
        body{font-size:30px;}
    </style>
</head>
<body>
    <h1>最大的标签</h1>
    <p>段落</p>
</body>

此时的h1是60px，p是30px。此时1em=30px。h1默认为2em。p默认为1em。

3、font-style

字体样式

值	描述
normal	默认值。浏览器显示一个标准的字体样式。
italic	浏览器会显示一个斜体的字体样式。（强调含义）
oblique	浏览器会显示一个倾斜的字体样式。
inherit（IE不支持）	规定应该从父元素继承字体样式。

基本用不到，除了italic倾斜。

</head>
    <style>
        #p1{font-style:"normal";}
        #p2{font-style:"italic";}
        #p3{font-style:"oblique";}
        #p4{font-style:"inherit";}
    </style>
</head>

4、font-weight

字体粗细

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

多用normal、bold。

<head>
    <style>
        #p1{font-weight:normal;}
        #p2{font-weight:bold;}
        #p3{font-weight:bolder;}
    </style>
</head>
<body>
    <p id="p1">我是段落</p>
    <p id="p2">我是段落</p>
    <p id="p3">我是段落</p>
</body>

网页显示：

7-1

5、font-variant

针对字母

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

<head>
    <style>
        body{font-variant:small-caps;}
        #p1{font-variant:normal;}
        #p2{font-variant:small-caps;}
        #p3{font-variant:inherit;}
    </style>
</head>
<body>
    <p id="p1">I am so cute.</p>
    <p id="p2">I am so cute.</p>
    <p id="p3">I am so cute.</p>
</body>

网页显示：

7-2

6、font的复合写法（简写）

1、size和family的属性值必须要写。
2、顺序 font-weight、font-style、font-variant随意调换，其次font-size，font-family。
3、可以设置行高，后面补充

三、文本属性

1、text-decoration

值	描述
none（较常用）	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
blink（谷歌、IE、Safari不支持）	定义闪烁的文本。
inherit（IE不支持）	规定应该从父元素继承 text-decoration 属性的值。

<head>
    <style>
        #a1{text-decoration:none;}
        #a2{text-decoration:underline;}
        #a3{text-decoration:overline;}
        #a4{text-decoration:line-through;}
    </style>
</head>
<body>
    <a id="a1">I am so cute.</a><br><br>
    <a id="a2">I am so cute.</a><br><br>
    <a id="a3">I am so cute.</a><br><br>
    <a id="a4">I am so cute.</a>
</body>

网页显示：

7-3

2、text-transform

值	描述
none	默认。定义带有小写字母和大写字母的标准的文本。
capitalize	文本中的每个单词以大写字母开头。
uppercase	定义仅有大写字母。
lowercase	定义无大写字母，仅有小写字母。
inherit	规定应该从父元素继承 text-transform 属性的值。

<head>
    <style>
        #p1{text-transform:none;}
        #p2{text-transform:capitalize;}
        #p3{text-transform:uppercase;}
        #p4{text-transform:lowercase;}
    </style>
</head>
<body>
    <p id="p1">I am so cute.</p>
    <p id="p2">I am so cute.</p>
    <p id="p3">I am so cute.</p>
    <p id="p4">I am so cute.</p>
</body>

网页显示：

7-5

3、text-indent

文本首行缩进，较常用。

<head>
    <style>
        #p2{text-indent:2em;}/*缩进两字符*/
    </style>
</head>
<body>
    <p id="p1">我最可爱。</p>
    <p id="p2">我最可爱。</p>
    <p id="p3">我最可爱。</p>
</body>

网页显示：

7-4

4、text-align

文本对齐方式

值	描述
left（也较常用）	把文本排列到左边。默认值：由浏览器决定。
right	把文本排列到右边。
center（较常用）	把文本排列到中间。
justify（针对的是整行都有文字）	实现两端对齐文本效果。
inherit（IE不支持）	规定应该从父元素继承 text-align 属性的值。

<head>
    <style>
        p{width:300px;height:50px;background-color:pink;}
        #p1{text-align:left;}
        #p2{text-align:right;}
        #p3{text-align:center;}
        #p4{text-align:justify;}
    </style>
</head>
<body>
    <p id="p1">I am so cute.</p>
    <p id="p2">I am so cute.</p>
    <p id="p3">I am so cute.</p>
    <p id="p4">I am so so so so so so so so so so so so cute.</p>
</body>

网页显示：

7-6

5、letter-spacing

字母/文字空隙

<head>
    <style>
        p{width:300px;height:50px;background-color:pink;}
        #p2{letter-spacing:20px;}
    </style>
</head>
<body>
    <p id="p1">我是一个可爱的段落。</p>
    <p id="p2">我是一个可爱的段落。</p>
</body>

网页显示：

7-7

6、word-spacing

单词与单词/字与字之间的距离（生效对象是空格）

<head>
    <style>
        p{width:300px;height:50px;background-color:pink;}
        #p2{word-spacing:20px;}
    </style>
</head>
<body>
    <p id="p1">I am so so so so so so so so so so so so cute.</p>
    <p id="p2">I am so so so so so so so so so so so so cute.</p>
</body>

网页显示：

7-8

7、line-height

行高

<head>
    <style>
        p{width:300px;height:50px;background-color:pink;}
        #p2{line-height:50px;}
    </style>
</head>
<body>
    <p id="p1">I am so cute.</p>
    <p id="p2">I am so cute.</p>
</body>

网页显示：

7-9
文字距离顶部的距离=（行高 - 字体的高度）/2

所以，当行高与容器的值一样时，垂直方向就居中。

8、vertical-align

垂直对齐以基线为参照上下移动文本，针对行内元素。元素会默认在基线对齐。

值	描述
baseline	默认。元素放置在父元素的基线上。
middle（常用）	把此元素放置在父元素的中部。
bottom（常用）	把元素的顶端与行中最低的元素的顶端对齐。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
text-bottom	把元素的底端与父元素字体的底端对齐。

常用于图标和文字的对齐。

<head>
    <style>
        span{border:1px solid red;}
        #s1{vertical-align:;}
        #s2{vertical-align:;}
    </style>
</head>
<body>
    <p>000
        <span id="s1">111</span>
        <span id="s2">222</span>
    </p>
</body>

网页显示：

7-10

<head>
    <style>
        span{border:1px solid red;}
        #s1{vertical-align:middle;}
        #s2{vertical-align:;}
    </style>
</head>
<body>
    <p>000
        <span id="s1">111</span>
        <span id="s2">222</span>
    </p>
</body>

网页显示：

7-11

9、标签之间有空格或者换行，会被浏览器解析成半个字符。

解决方法：不同的情况使用不同的方法

（1）不推荐

<span>111</span
><span>222</span
><sapn>333</span>

（2）给父级加一个font-size:0;但是父级里面的font-size就要单独设定。但这种对图片不生效。

<div style="font-size:0;">
    <span style="font-size:16px;">111</span>
    <span style="font-size:16px;">222</span>
    <span style="font-size:16px;">333</span>
</div>

（3）把元素升级为块级元素。对图片生效。

style="display:block;"

好大的汪汪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
06---HTML+CSS---字体与文本

一、字体来源 1、一般能在网页看到的字体，都是你电脑中安装过的字体。 2、保存在第三方网站(通过链接的方式引入,类似于.css) 3、保存在服务器(使用@font-face引入，较少见)二、字体属性1、font-family规定网页上的字体。head> style> p{font-family:"微软雅黑";} style>hea
复制链接

扫一扫