CSS3文字与字体相关样式

17-02-15 来源：[db:作者]

收藏我要投稿

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

给文字添加阴影

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>

情人节单身狗的学习笔记2017.2.14

点击复制链接与好友分享!回本站首页