[CSS3]学习笔记-文字与字体相关样式

时间：2023-11-23 13:44:20

1、给文字添加阴影

 <!doctype html>
 <html>
 <head>
     <meta charset="utf-8">
     <title></title>
     <style>
         div{
             /*text-shadow: 5px 5px 5px red;*/
             /*可指定多个阴影*/
             text-shadow: 5px 5px 5px red,
             15px 15px 5px red;
             color:black;
             font-size: 40px;
             font-weight:bold;
             font-family: 宋体;
             background-image: url("1.jpg");
             height:200px;
             width:100px;
             padding:30px;
             text-align:center;
         }
     </style>
 </head>
 <body>
     <!--text-shadow:length length length color-->
     <!--阴影离开文字的横向方向距离(可为正负)、阴影离开文字的纵向方向距离（可为正负）、模糊的程度、背景颜色-->
     <div>你好！</div>
 </body>
 </html>

2、使用服务器端字体

当客户端没有想要字体的样式时，可以使用服务端的字体。

 <!doctype html>
 <html>
 <head>
     <meta charset="utf-8">
     <title></title>
     <style>
         /*引入服务端的字体*/
         @font-face {
             font-family: WebFont;
             /*ttf:o  otf:t*/
             src:url('1.ttf')format("truetype");
             font-weight: normal;
         }
         div{
             font-family: WebFont;
         }
         /*引入客户端的字体*/
         @font-face {
             font-family: Arial;
             src:local("Arial");
         }
         div{
             font-family: Arial;
         }
     </style>
 </head>
 <body>
     <!--word-break:normal, keep-all, break-all>
     <!--使用浏览器的默认换行规则，在半角/空格/连字符处换行，允许在单词间换行-->
     <div>
         This is my Page.
     </div>
 </body>
 </html>

3、修改文字种类而保持字体尺寸不变

 <!doctype html>
 <html>
 <head>
     <meta charset="utf-8">
     <title></title>
     <style>
         /*font-size-adjust 这个值需要计算得出
         需要x-height=59  font-size=100,则这个值应设为0.58*/
         /*不同的字体，font-size相同，但大小看起来还是不同，可以通过添加以上的属性来设置*/
         #div1{
             font-family: Menlo;
             font-size: 18px;
             font-size-adjust: 0.60;
         }
         #div2{
             font-family: cursive;
             font-size: 18px;
             font-size-adjust: 0.57;
         }
         #div3{
             font-family: Arial, Helvetica, sans-serif;
             font-size: 18px;
             font-size-adjust: 0.57;
         }

     </style>
 </head>
 <body>
     <div id="div1">test example</div>
     <div id="div2">test example</div>
     <div id="div3">test example</div>
 </body>
 </html>

相关文章