"CSS Secret" - summed up 47 Css tips (D): typography

Note: This case from "css Secret" book.

Hyphen line break

Use hyphens: auto property can fill in English the word line and line feed use hyphens, both reading and beautiful.
Note: In the chrom, IE11 does not support this property, supported on fiiefox .

.break-line
  height: 180px
  width: 300px
  margin 40px auto
  border solid 1px #666
  hyphens auto

Insert a line break

Dl dt dd as used to show an effect, is now complete layout may flex better, not introduced.

Zebra stripes text line

Before the table is processed zebra generally used: nth-child (even) to add even line style. But for each line of text is not to add a separate div it. Thus achieved using striped background.

line-height 25px
background-image linear-gradient(to bottom, #f222 50%, #fff 0)
background-size auto 50px

The width adjustment tab

Use tab-size: 4 to adjust indentation. A tab represents four spaces.
PS: it may become space when vscode use eslint automatically saved, so the style will not enter into force. Tab Size can be changed back.

.tab
  tab-size 4

Ligature

Use font-variant-ligatures elimination of ligatures. Difficult waffles common example of fi and fl ligatures easily formed.

font-variant-ligatures: no-common-ligatures;

Ornate ampersand

Skip.

Custom Underline

.underline
	background: linear-gradient(to right, red, blue) no-repeat // 颜色
	background-size: 100% 1px // 下划线长度和宽度
	background-position: 0 15px // 下划线未知
	text-shadow: 1px 0 white, -1px 0 white // 设置g,y这种下划线不会穿过字母

Text Effects reality

// 凸版印刷效果
.print
	background hsl(210, 13%, 40%)
	color hsl(210, 13%, 75%)
	text-shadow 0 -1px 1px black

// 空心字效果
.hollow
	background: deeppink
	color: white
	text-shadow: 1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black

// 文字外发光效果
.light
	background: #203
	color: #ffc
	text-shadow: 0 0 2px, 0 0 3px

// 文字凸起效果：主要思路就是使用一长串累加的投影，不设模糊并以1px的跨度逐渐错开，使颜色逐渐变暗，然后在底部加一层强烈模糊的暗投影，从而模拟完整的立体效果
.bulge
	background: #58a
	color: white
	text-shadow: 0 1px hsl(0,0%,85%),
		0 2px hsl(0,0%,80%),
		0 3px hsl(0,0%,75%),
		0 4px hsl(0,0%,70%),
		0 5px hsl(0,0%,65%),
		0 5px 10px black // 底部加一层阴影

Circle text

viewBox: 0,0 (usually written 0,0), width: Width, height: Height
M: starting position
a: elliptical Arc (elliptic arc)
the Z: closed at the beginning of the path

<div class="circular">
	<svg viewBox="0 0 300 300">
		<path d="M 100,100 a 50,50 0 1,1 0,1 z" id="circle" />
		<text>
			<textPath xlink:href="#circle">circular reasoning works because</textPath> // 文字链接到path上
		</text>
	</svg>
</div>

.circular
	width 300px
	height 300px
	margin 3px auto 0
	path
		fill none // 去掉填充颜色
.circular svg
	display block
	overflow visible

Although this chapter sample application again, but many do not understand = =