CSS3 文字与字体相关样式

时间：2022-06-25 01:05:13
  • 给文字添加阴影
  • 文字换行
  • 客户端文字
  • font-size-adjust属性

给文字添加阴影-text-shadow属性

text-shadow:length length length color

前三个length分别指阴影离开文字横向距离、纵向距离（这两个参数允许值为负）和模糊半径（值越大模糊范围越大，默认为0，不模糊），color指定阴影的颜色

div {

            text-shadow:5px 5px 10px gray;

        }

让文本换行

很多浏览器本身自带换行功能，在css3中可以使用word-break来决定换行的处理方式

div {

            word-break:keep-all;

        }
值 换行规则
normal 使用浏览器的默认换行规则
keep-all 只能在半角空格或连字符处换行
break-all 允许在单词内换行

使用word-wrap属性来实现长单词与url地址的自动换行

word-wrap:break-word/normal;

//normal为默认处理

使用服务器端字体

在CSS3中，使用@font-face来利用服务器端的默认字体。

@font-face {

            font-family: WebFont;

            src:url('font/Fontin_Sans_R_45b.otf') format("opentype");

            font-weight: normal;

        }

src指定服务器端字体的字体文件所在路径

  • TrueType字体：.ttf
  • OpenType字体：.otf
  • Embedded OpenType字体：.eot(EOT是OpenType的一种压缩形式。这种格式是专用的（Microsoft），仅IE提供支持。)
  • SVG字体：.svg（Scalable Vector Graphics或SVG是一种通用图像格式，SVG字体使用这种格式表示字符。）
  • Web开放字体格式：.woff（Web开放字体格式建立在TrueType基础之上，已经发展为Web字体的一个标准。大多数现代浏览器都对这种格式提供了很好的支持。）

先引用客户端上的字体，没有再引用服务器端上的字体

@font-face {

            font-family: MyArial;

            src:local("Arial"),

                url("KaushanScript-Regular.otf");

        }

font-size-adjust属性

aspect的计算方法：x-height:58 font-size:100px aspect:0.58

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        #div1{

            font-family: Menlo;

            font-size: 16px;

            font-size-adjust: 0.60;

        }

        #div2{

            font-family: cursive;

            font-size: 16px;

            font-size-adjust: 0.57;

        }

        #div3{

            font-family: "Lantinghei SC";

            font-size: 16px;

            font-size-adjust: 0.57;

        }

    </style>

</head>

<body>

    <div id="div1">Text sample</div>

    <div id="div2">Text sample</div>

    <div id="div3">Text sample</div>

</body>

</html>

相关文章