移动端第七章字体

最新推荐文章于 2022-03-20 14:04:19 发布

starry__sty

最新推荐文章于 2022-03-20 14:04:19 发布

阅读量329

点赞数 1

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

本文链接：https://blog.csdn.net/starry__sty/article/details/109277622

版权

移动端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

文字阴影

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>

文字描边

webkit-text-stroke:宽度 颜色

文字排列

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

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

省略号

/*单行文本省略号*/
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;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<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>
</html>

自定义字体类型

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

字体图标 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>

starry__sty

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端第七章字体

文字阴影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-si
复制链接

扫一扫