CSS3文字与字体相关样式

最新推荐文章于 2023-10-29 22:23:49 发布

丸子药丸

最新推荐文章于 2023-10-29 22:23:49 发布

阅读量685

点赞数

分类专栏： CSS3 文章标签： CSS3

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

版权

CSS3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

给文字添加阴影

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

丸子药丸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3文字与字体相关样式

给文字添加阴影使用服务器端字体修改文字种类而保持字体尺寸不变给文字添加阴影text-shadow: length(阴影距离文字横向方向距离) length(阴影距离文字纵向方向距离) length(模糊度越大越模糊) color(背景模糊的颜色)第一个length正方向向右第二个length正方向向下可添加多个阴影，直接加“，”<html><head lang="en"> <met
复制链接

扫一扫