CSS3文字与字体相关样式_css3 字体-CSDN博客

本文链接：https://blog.csdn.net/hualala_32/article/details/55120159

给文字添加阴影
使用服务器端字体
修改文字种类而保持字体尺寸不变

给文字添加阴影

text-shadow: length(阴影距离文字横向方向距离) length(阴影距离文字纵向方向距离) length(模糊度越大越模糊) color(背景模糊的颜色)

第一个length正方向向右
第二个length正方向向下

可添加多个阴影，直接加“，”

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            text-shadow: -5px -5px 10px #ff00ff,
                         5px 5px 5px #ff00ff,
                         10px 10px 2px #ff00ff;
            color: black;
            font-size: 40px;
            font-weight: bold;
            font-family: 宋体;
            background-image: url("L04.jpg");
            height: 500px;
            width: 500px;
            padding: 30px 0;
            text-align: center;
        }
    </style>
</head>
<body>
<!--text-shadow:length阴影离开文字的横向方向距离 length阴影离开文字的纵向方向距离 length透明度 color背景模糊的颜色-->
    <div>你好</div>
</body>
</html>

使用服务器端字体

文本自动换行

word-break: normal,keep-all,break-all;

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

使用服务器端字体

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        @font-face {
            font-family: WebFont;
            src: url("KaushanScript-Regular.otf");
            font-weight: normal;
        }
        div{
            font-family: WebFont;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div>
        This is my page web123;
    </div>
</body>
</html>

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

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

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        @font-face {
            font-family: MyArial;
            src:local("Arial"), 
                url("KaushanScript-Regular.otf");
        }
        div{
            font-family: MyArial;
        }
    </style>
</head>
<body>
    <div>
        This is my page web123;
    </div>
</body>
</html>

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

font-size-adjust: aspect;

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>