html中文字处理美化的效果,css字体相关样式的处理

连字符断行

实现文本两端对齐的方式，可以使用hyphens，它接收三个值none、manual 和auto。manual是它的初始值，将hyphens设置成auto可以实现。为了确保它奏效，需要在HTML标签的lang属性中指定合适的语言。

效果如下：

插入换行

上面这种格式的实现，看似简单有很让人头疼，这种格式的DOM形式：

Name:

Lea Verou

Email:

lea@verou.me

lea@verou.me

Location:

Earth

由于dt和dd都是块级元素，导致了名字和值都会换行，有一种很好的处理办法：

dt, dd {

display: inline;

}

dd + dt::before {

content: '\A';

white-space: pre;

}

dd + dd::before {

content: ', ';

font-weight: normal;

}

Unicode字符中A代表换行符。通过设置 white-space: pre，保留源代码中的这些空白符和换行

文本行的斑马条纹的实现

主要思路是：在CSS 中用渐变直接生成背景图像，并且用em 单位来设定背景尺寸，这

样背景就可以自动适应font-size 的变化了。

具体的实现如下：

urlParams.gitName = record.gitName;

for (let item in record) {

if (record[item] == currentId) {

urlParams.stage = item;

}

}

localStorage.setItem('urlParams', JSON.stringify(urlParams));

.code {

padding: .5em;

line-height: 1.5;

tab-size: 4; /* 接受一个数字或者一个长度值控制代码缩进 */

background: beige;

background-size: auto 3em;

background-origin: content-box;

background-image: linear-gradient(rgba(0,0,0,.2) 50%, transparent 0);

}

效果如下：

美化&符号

在写页面时，有时会出现经过美化过的&符号，如果用src单独指定某一种字体的话会增加http请求的次数，通过local这个函数可以解决这个问题，它可以指定本地字体的名称。

在使用font-face将local这个函数引入时，需要指定要渲染的某一个特定的字符，就需要使用unicode-range，它只在@font-face 规则内部生效，它并不是一个CSS属性

unicode-range它的语法是基于“Unicode码位”，因此需要知道字符的十六进制码位，通过

"&".charCodeAt(0).toString(16);(返回26) 得到&的十六进制编码

@font-face {

font-family: Ampersand;

src: local('Baskerville-Italic'),

local('GoudyOldStyleT-Italic'),

local('Palatino-Italic'),

local('BookAntiqua-Italic');

unicode-range: U+26;

}

h1 {

font-family: Ampersand, Helvetica, sans-serif;

}

最终的效果如下：

自定义下划线的方法

处理css默认样式下划线的方法可以使用background-image及其相关的属性，通过它设置渐变达到效果。

具体的实现如下：

span {

background: linear-gradient(gray, gray) no-repeat;

background-size: 100% 1px;

background-position: 0 1.15em;

/* 如果下划线在遇到字母时会自动断开避让,通过设置text-shadow模拟*/

text-shadow: .05em 0 white, -.05em 0 white;

}

效果如下：

文字凸起、空心、发光的等效果的实现

实现凸版印刷字体的效果

使用投影的效果达到，具体的实现如下：

.div {

background: hsl(210, 13%, 60%);

color: hsl(210, 13%, 30%);

text-shadow: 0 1px 1px hsla(0,0%,100%,.8);

}

最终的效果：

空心字效果的实现

方法是使用用text-shadow 属性的扩张参数就可让投影变大，看起来就像给文字勾边了一样；或者是使用svg

用text-shadow:

div {

color: white;

text-shadow: 1px 1px black, -1px -1px black,

1px -1px black, -1px 1px black;

}

最终效果：

用svg的方法：

CSS

h1 {

font: 500%/1 Rockwell, serif;

background: deeppink;

color: white;

}

h1 text {

fill: currentColor;

}

h1 svg {

overflow: visible

}

h1 use {

stroke: black;

stroke-width: 6;

stroke-linejoin: round;

}

效果如下：

svg的实现方式虽然语法复杂，但是它的视觉效果却是最好的。

文字外发光的效果

实现的方法就是使用重叠的text-shadow即可，不需要考虑偏移量，颜色也只需跟文字保持一致。

.hi {

background: #203;

color: #ffc;

text-shadow: 0 0 .1em, 0 0 .3em;

}

效果如下：

文字凸起的效果

.css3d {

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;

}

效果如下：

环形文字的实现

使用svg实现

id="circle" />

Each data point or cell of a cube is the

.circular {

width: 300px;

height: 300px;

margin: 3em auto 0;

}

.circular svg {

display: block;

overflow: visible;

}

.circular path {

fill: none;

}

效果如下：