CSS3-文字与文本

text-shadow属性

text-shadow：水平偏移 垂直偏移 阴影大小（可省略，省略后，阴影大小就和文字相同） 颜色

text-shadow为文字添加上阴影

例子：

描边：

 1 <html>
 2     <head>
 3         <title>文字文本练习</title>
 4         <style>
 5             p{
 6                 font-size: 50px;
 7                 color: white;
 8                 text-shadow: 0px 0px 3px red;
 9             }
10         </style>
11     </head>
12     <body>
13         <p>
14             新年快乐！
15         </p>
16     </body>
17 </html>

 

 浮雕：

 1 <html>
 2     <head>
 3         <title>文字文本练习</title>
 4         <style>
 5             p{
 6                 font-size: 50px;
 7                 color: white;
 8                 text-shadow: 2px 2px 4px black;
 9             }
10         </style>
11     </head>
12     <body>
13         <p>
14             新年快乐！
15         </p>
16     </body>
17 </html>

 

 

word-wrap属性

长文本折叠属性，通常运用于长单词或URL地址的折叠

 1 <html>
 2     <head>
 3         <title>文字文本练习</title>
 4         <style>
 5             p{
 6                 width: 8em;
 7                 border:1px solid #333;
 8                 word-wrap: break-word;
 9             }
10         </style>
11     </head>
12     <body>
13         <p>
14             这是一个很长的单词abcdefghijklmnopqrstu
15         </p>
16     </body>
17 </html>

 

 

@font-face规则

一种显示特殊字体的方式，在CSS3之前要显示特殊字体只能把特殊字体做在图片里，很麻烦。在CSS3规定后，可以在服务器端下载web字体，完成特殊字体的使用。

 

 利用@font-face规则，定义字体并引用需要字体的四种文件格式

使用方式：
1.首先在网站的文件夹下创建一个font文件夹

2.把字体在网上下载下来，放在font文件夹中

3.在HTML中引用字体

例子：

 1 <html>
 2     <head>
 3         <title>文字文本练习</title>
 4         <style>
 5             @font-face {
 6                 font-family: KKK;
 7                 src:url('font/KKK.tff'),
 8                     url('font/KKK.eot'),
 9                     url('font/KKK.woff'),
10                     url('font/KKK.svg');
11             }
12             p{
13                 font-size: 50px;
14                 color: white;
15                 text-shadow: 0px 0px 3px red;
16                 font-family: KKK;
17             }
18         </style>
19     </head>
20     <body>
21         <p>
22             新年快乐！
23         </p>
24     </body>
25 </html>

(KKK为网上下载文件，可以自行命名，KKK是我随便起的名字)

posted @ 2021-02-08 16:12  _厨师沙拉  阅读(87)  评论(0)    收藏  举报