移动端第七章字体

最新推荐文章于 2024-05-02 12:19:25 发布

LW0512

最新推荐文章于 2024-05-02 12:19:25 发布

阅读量205

点赞数

分类专栏：移动端

本文链接：https://blog.youkuaiyun.com/LW0512/article/details/108921838

版权

移动端专栏收录该内容

25 篇文章

订阅专栏

字体

1：文字阴影

text-shadow：x y blur color, …
参数
x		横向偏移
y		纵向偏移
blur		模糊距离
color		阴影颜色

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			p{
				font-size: 100px;
				text-align: center;
				/*text-shadow: x y 模糊度  颜色;*/
				/*text-shadow: 2px 2px 2px red;*/
				text-shadow: 2px 2px 2px red,4px 4px 4px yellow,8px 8px 8px blue;
			}
		</style>
	</head>
	<body>
		<p>通天塔</p>
	</body>
</html>

2：文字描边

webkit-text-stroke:宽度 颜色

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			p{
				font-size: 100px;
				text-align: center;
				-webkit-text-stroke:2px red;
				unicode-bidi:bidi-override;
				direction:rtl;
			}
		</style>
	</head>
	<body>
		<p>通天塔</p>
	</body>
</html>

3:文字排列

direction  定义文字排列方式(全兼容)
rtl 从右向左排列
ltr 从左向右排列
注意要配合unicode-bidi:bidi-override; 一块使用

实例:

4：省略号

单行文本省略号

p{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

多行文本省略号
多行省略不兼容IE，要想兼容必须用插架或者滤镜写法（自行百度）

p{
		display:-webkit-box;
		overflow:hidden;
		word-break:break-all;
		-webkit-box-orient:vertical;
		text-overflow:ellipsis;
		-webkit-line-clamp:20;
	}

5：自定义字体类型

@font-face {
	font-family:'二哈';
	src: url(fonts/Fontin_Sans_R_45b.otf);
}

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				font-size: 200px;
				text-align: center;
				font-family: 'fon_t';
			}
			@font-face {
				font-family:'fon_t';
				src: url(fon/Fontin_Sans_I_45b.otf);
			}
		</style>
	</head>
	<body>
		<!--<div>坎坎坷坷扩</div>-->
		<div>asdfghjk</div>
	</body>
</html>

6：字体图标 icon

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--<link rel="stylesheet" type="text/css" href="fonts/iconfont.css"/>-->
		<link rel="stylesheet" type="text/css" href="font/iconfont.css"/>
		<style type="text/css">
			.icon_t{
				/*字体图标的本质就是字体  不过长的想一个图形*/
				font-size: 200px;
				text-align: center;
				color: red;
			}
			.zanting{
				font-size: 200px;
				text-align: center;
				color: red;
			}
		</style>
	</head>
	<body>
		<p class="icon iconfont icon_t">&#xe663;</p>
		<p class="icon iconfont icon-zanting zanting"></p>
		
	</body>
</html>