移动端第五章字体

最新推荐文章于 2022-07-16 22:55:15 发布

小涛涛啊！

最新推荐文章于 2022-07-16 22:55:15 发布

阅读量115

点赞数

分类专栏：移动端内容文章标签：移动端

本文链接：https://blog.csdn.net/t5555666/article/details/108834881

版权

移动端内容专栏收录该内容

15 篇文章 0 订阅

订阅专栏

第五章字体

1：文字阴影

text-shadow：x y blur color, …
参数
x		横向偏移
y		纵向偏移
blur		模糊距离
color		阴影颜色
文本阴影如果加很多层，会很卡很卡很卡
例子：
层叠：color:red; font-size:100px; font-weight:bold; text-shadow:2px 2px 0px white, 4px 4px 0px red;
光晕：color:white; font-size:100px; text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
火焰文字：text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e; font-family:Verdana, Geneva, sans-serif; font-size:100px; font-weight:bold; color:white;

	<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>

2：文字描边

webkit-text-stroke:宽度 颜色

<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>

3:文字排列

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

4：省略号

/单行文本省略号/

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

<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				border: 1px solid red;
				margin: 100px auto;
				white-space: nowrap;/*不折行，一行显示*/
				overflow: hidden;
				text-overflow: ellipsis;/*把文字变成省略号*/
				
			}
		</style>
	</head>
	<body>
		<div>吞吞吐吐拖拖拖拖拖拖拖拖拖拖拖拖拖</div>
	</body>

/多行文本省略号/

多行省略不兼容IE，要想兼容必须用插架或者滤镜写法（自行百度）
p{
	display:-webkit-box;
	overflow:hidden;
	word-break:break-all;
	-webkit-box-orient:vertical;
	text-overflow:ellipsis;
	-webkit-line-clamp:20;
}

	<style type="text/css">
			div{
				width: 400px;
				height: 400px;
				border: 1px solid red;
				margin: 100px auto;
			}
			p{
				display:-webkit-box;
				overflow:hidden;
				word-break:break-all;
				-webkit-box-orient:vertical;
				text-overflow:ellipsis;
				-webkit-line-clamp:7;/*想做省略号的行数*/
			}
		</style>
	</head>
	<body>
		
		<div>
			<p>吞吞吐吐拖拖拖拖拖拖拖拖拖拖拖拖拖吞吞吐吐拖拖拖拖拖
			拖拖拖拖拖拖拖拖吞吐吐拖拖拖拖拖拖拖拖拖拖拖拖拖吞吐吐
			拖拖拖拖拖拖拖拖拖拖拖拖拖吞吐吐拖拖拖拖拖拖拖拖拖拖拖
			拖拖吞吐吐拖拖拖拖拖拖拖拖拖拖拖拖拖吞吐吐拖拖拖拖拖拖
			拖拖拖拖拖拖拖吞吐吐拖拖拖拖拖拖拖拖拖拖拖拖拖吞吐吐拖
			拖拖拖拖拖拖拖拖拖拖拖拖吞吐吐拖拖拖拖拖拖拖拖拖拖拖拖
			拖吞吐吐拖拖拖拖拖拖拖拖拖拖拖拖拖吞吞吐吐拖拖拖拖拖拖拖拖拖拖拖拖拖</p>
		</div>
	</body>

5：自定义字体类型

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

<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>

6：字体图标 icon

<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>