首页 > 程序开发 > web前端 > HTML/CSS >

CSS3文字与字体相关样式

2017-02-15

给文字添加阴影 使用服务器端字体 修改文字种类而保持字体尺寸不变 给文字添加阴影 text-shadow: length(阴影距离文字横向方向距离) length(阴影距离文字纵向方向距离) length(模糊度越大越模糊) color(背

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

给文字添加阴影

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

相关文章
最新文章
热点推荐