您的位置: 首页  >  文章  >  Css 学习笔记 第六章 文字与字体

Css 学习笔记 第六章 文字与字体

分类: 文章 • 2023-11-23 12:30:10

                                                               文字与字体

  • text-overflow      规定当文本溢出包含元素时   【只显示一行  文字过多时显示 ... 】   使用的三个条件
  1. 设置容器的宽度 并添加 overflow 属性
  2. 将文字设置为不 换行  white-space:nowrap;
  3. 设置 text-overflow:ellipsis | clip
  • word-wrap         允许长单词换行到下一行
  1. normal    值允许在断字 的地方换行
  2. break-word  在长单词或 url 地址内部进行换行
  • text-shadow      文字的阴影
  1. text-shadow:X-Offset Y-Offset blur color;
  • font-smoothing  抗锯齿或者  光滑
  1. font-smoothing;subpix-antialiased(浏览器默认)   | none (小于小像素的文字) | antialiased(抗锯齿)

Css 学习笔记 第六章 文字与字体

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
	<style>
		.box{
			width: 200px;
			border: 1px solid darkred;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
	 
		} 
		.div{
			width: 200px;
			border: 1px solid blue;
			word-wrap: break-word;
		}
		
		.hshadow{
			font-family: "微软雅黑";
			text-shadow: 3px 3px 2px rgba(0,0,0,0.5);
		}
	</style>
	<body>
		
		<div class="box">Css 很好 很强大很好 很强大Css 很好 很强大很好 很强大Css 很好 很强大很好 很强大</div>
		
		<div class="div">
			asdasd adaljh as djaiodjaisssssssssssopsjdiojdioajd asdasidjiasjdias dasjdas 
		</div>
		
		<h1 class="hshadow">青年帮创意工坊</h1>
	</body>
</html>

CSS 中的 字体 @font-face

 

                       .ttf（True Type Fonts）    .otf  （Open type fonts）

Css 学习笔记 第六章 文字与字体

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<style>
		@font-face {
			font-family:"font1";
			src:url("vanadin.ttf");
		}
		@font-face {
			font-family:"font2";
			src:url("ADAM.CG PRO.otf");
		}
		
		.h11 {
			font-family: "font1";
		}
		.h13 {
			font-family: "font2";
		}
		
		.h12{
			font-family: "微软雅黑";
		}
 
	</style>
	<body>
		<h1>ABCDE</h1>
		<h1 class="h11" >ABCDE</h1>
		<h1 class="h12">ABCDE</h1>
		<h1 class="h13">ABCDE</h1>
 
	</body>
</html>

图片 当字体

 

去这个网站下载字体   https://www.iconfont.cn/Css 学习笔记 第六章 文字与字体

Css 学习笔记 第六章 文字与字体Css 学习笔记 第六章 文字与字体

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<style>
		@font-face {
			font-family: "font1";
			src: url("vanadin.ttf");
		}

		@font-face {
			font-family: "font2";
			src: url("ADAM.CG PRO.otf");
		}

		.h11 {
			font-family: "font1";
		}

		.h13 {
			font-family: "font2";
		}

		.h12 {
			font-family: "微软雅黑";
		}


		@font-face {
			font-family: 'iconfont';
			src: url('font_ico/iconfont.eot');
			src: url('font_ico/iconfont.eot?#iefix') format('embedded-opentype'),
				url('font_ico/iconfont.woff2') format('woff2'),
				url('font_ico/iconfont.woff') format('woff'),
				url('font_ico/iconfont.ttf') format('truetype'),
				url('font_ico/iconfont.svg#iconfont') format('svg');
		}

		.iconfont {
			font-family: "iconfont" !important;
			font-size: 60px;
			font-style: normal;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
		}
	</style>
	<body>
		<h1>ABCDE</h1>
		<h1 class="h11">ABCDE</h1>
		<h1 class="h12">ABCDE</h1>
		<h1 class="h13">ABCDE</h1>
		
		<h1 class="iconfont">&#xeb8b;</h1>

		<span class="iconfont">&#xeb94;</span>
		<h2 class="iconfont">&#xeb98;</h2>




	</body>
</html>

Css 学习笔记 第六章 文字与字体

 

 

 

 

 

相关推荐