CSS——字体排版

时间：2024-10-02 09:56:51

1. 连字符断行——英文单词

英文文档下，实现英文单词的断行。

  • 可以通过一些软连字符（­）来辅助浏览器进行断词
  • CSS属性 hyphens接受三个值：none、manual 和 auto

manual 是hyphens属性的初始值，其行为可以在任何时候手工插入软连字符­来实现断词折行的效果。而hyphens: none; 会禁用这种行为

<!DOCTYPE html>
<html lang="en"><style> div {width: 8.7em;font: 180%/1.4 Baskerville, serif;text-align: justify;background: #ccc;margin-top: 10px;}.app {/*禁用软连字符（`&shy;`）断行 */hyphens: none;} </style><body><div>“The only way to get rid of a temptation is to yield to it.”</div><div>“The only way to get rid of a tempta&shy;tion is to yield to it.”</div><div class="app">“The only way to get rid of a tem&shy;ptation is to yield to it.”</div></body>
</html>
  • 1
  • 2
  • 3

2. 换行

2.1 <br> 元素换行

2.2 Unicode 换行字符\A

一个专门代表换行符的Unicode 字符：0x000A。在 CSS 中，这个字符可以写作 “\000A”，或简化为 “\A”。我们可以用它来作为 ::after伪元素的内容，并将其添加到每个 <dd> 元素的尾部

在 HTML 代码中输入换行符，默认情况下，这些换行符会与相邻的其他空白符进行合并。需要用 white-space: pre;保留源代码中的这些空白符和换行

<!DOCTYPE html>
<html lang="en"><style> dt,dd {display: inline;margin: 0;}dd {font-weight: 600;}/*对 <dt> 之前的最后一个 <dd> 来插入换行*/dd + dt::before {content: "\A";white-space: pre;}/*在每个前面有<dd> 的 <dd> 头部插入逗号*/dd + dd::before {content: ", ";font-weight: normal;margin-left: -0.25em;}body {font: 150%/1.6 Baskerville, Palatino, serif;} </style><body><dl><dt>Name:</dt><dd>Lea Verou</dd><dt>Email:</dt><dd>lea@</dd><dd>leaverou@</dd><dt>Location:</dt><dd>Earth</dd></dl></body>
</html>
  • 1
  • 2
  • 3

3. 文本行的斑马条纹

对整个元素设置统一的背景图像，一次性加上所有的斑马条纹。

可以在CSS 中用渐变直接生成背景图像，而且可以用 em 单位来设定背景尺寸，这样背景就可以自动适配font-size 了。

<!DOCTYPE html>
<html lang="en"><style> pre {padding: 0.5em;line-height: 1.5;background: hsl(20, 50%, 95%);/* 实现条纹背景*/background-image: linear-gradient(rgba(120, 0, 0, 0.1) 50%,transparent 0);background-size: auto 3em;/*浏览器解析 background-position时以 content box 的外沿作为基准，而不是默认的 padding box 外沿*/background-origin: content-box;font-family: Consolas, Monaco, monospace;}code {font: inherit;} </style><body><pre><code>while (true) {var d = new Date();if (()==1 &amp;&amp;()==3) {alert("TROLOLOL");}}</code></pre></body>
</html>
  • 1
  • 2
  • 3

3.1 CSS属性white-space——处理空白部分

4. 调整制表符 tab 的空格数

包含大量代码的网页，在使用<pre>和 <code> 元素来显示代码时，设置默认tab的空格数

<!DOCTYPE html>
<html><head><style> pre {padding: 0.5em;line-height: 1.5;background: hsl(20, 50%, 95%);font-family: Consolas, Monaco, monospace;}#t1 {-moz-tab-size: 4; /* Firefox */tab-size: 4;}#t2 {-moz-tab-size: 10; /* Firefox */tab-size: 10;} </style></head><body><h1>tab-size 属性</h1><pre >I	use	tab-size	4</pre><pre >I	use	tab-size	10</pre></body>
</html>
  • 1
  • 2
  • 3

5. 字体的连字效果——font-variant-ligatures

CSS简写属性font-variant，由很多新的展开式属性组合而成。其中之一叫作 font-variant-ligatures，专门用来控制连字效果的开启和关闭。

如果要启用所有可能的连字，需要同时指定这三个标识符：

font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;
  • 1
  • font-variant-ligatures: none ，会把所有的连字效果都关掉
  • font-variant-ligatures:normal 为默认值，

6. 华丽的 & 符号

用一种单独的字体美化某个特定的字符

<!DOCTYPE html>
<html><head><style> .amp {font-family: Baskerville, "Goudy Old Style", Garamond, Palatino, serif;font-style: italic;} </style></head><body>HTML <span class="amp">&amp;</span> CSS</body>
</html>
  • 1
  • 2
  • 3
<!DOCTYPE html>
<html><head><style> @font-face {font-family: Ampersand;/*@font-face 规则中的 src 描述符还可以接受 local()函数，用于指定本地字体的名称*/src: local("Baskerville-Italic"), local("GoudyOldStyleT-Italic"),local("Garamond-Italic"), local("Palatino-Italic");/*unicode-range 描述符只在 @font-face 规则内部生效*//*用于把字体作用的字符范围限制在一个子集内*/unicode-range: U+26;}h1 {font-family: Ampersand, Helvetica, sans-serif;} </style></head><body><h1>HTML & CSS</h1></body>
</html>
  • 1
  • 2
  • 3

6.1 unicode-range 语法

  • unicode-range 的语法是基于“Unicode 码位”
  • 加上 U+ 前缀,指定一个字符区间,比如 U+400-4FF
  • 允许同时指定多个字符或多个区间，把它们用逗号隔开即可,比如 U+26, U+4??, U+2665-2670

7. 自定义下划线

text-decoration: underline;
  • 1

7.1 CSS背景渐变实现自定义下划线

<!DOCTYPE html>
<html><head><style> body {font: 250%/1.6 Baskerville, Palatino, serif;}a {background: linear-gradient(gray, gray) no-repeat;background-size: 100% 1px;background-position: 0 0.98em;}p:nth-child(2) a {background: linear-gradient(90deg, gray 66%, transparent 0) repeat-x;background-size: 0.2em 2px;background-position: 0 0.98em;} </style></head><body><p>“The only way to <a>get rid of a temptation</a> is to <a>yield</a> to it.”</p><p>“The only way to <a>get rid of a temptation</a> is to <a>yield</a> to it.”</p></body>
</html>
  • 1
  • 2
  • 3

7.2 直接使用下划线属性text-decoration 

<!DOCTYPE html>
<html><head><style> body {font: 250%/1.6 Baskerville, Palatino, serif;}a {/* text-decoration简写属性 */text-decoration-color: blue;text-decoration-style: wavy;text-decoration-line: underline;text-decoration-skip-ink: none;} </style></head><body><p>“The only way to <a>get rid of a temptation</a> is to <a>yield</a> to it.”</p></body>
</html>
  • 1
  • 2
  • 3

8. 现实中的文字效果

8.1 凸版印刷效果

凸起物的下方会产生阴影，而凹陷的底部边缘则会被打亮

<!DOCTYPE html>
<html><head><style> body {font: 250%/1.6 Baskerville, Palatino, serif;}p {padding: 0.8em 1em;background: hsl(210, 13%, 60%);color: hsl(210, 13%, 30%);text-shadow: 0 1px 1px hsla(0, 0%, 100%, 0.8);}p + p {background: hsl(210, 13%, 30%);color: hsl(210, 13%, 60%);text-shadow: 0 -1px 1px black;} </style></head><body><p>“The only way to get rid of a temp­ta­tion is to yield to it.”</p><p>“The only way to get rid of a temp­ta­tion is to yield to it.”</p></body>
</html>
  • 1
  • 2
  • 3

8.2 空心字效果

<!DOCTYPE html>
<html><head><style> h1 {margin: 0;color: white;}/*第一种方案——重叠多层轻微模糊的投影来模拟描边*/h1:first-child {text-shadow: 1px 1px black, -1px -1px black, 1px -1px black,-1px 1px black;}/*第二种方案-使用 SVG 来实现正常的粗描边效果*/h1 text {fill: currentColor;}h1 use {stroke: black;stroke-width: 6;stroke-linejoin: round;}body {background: deeppink;font: bold 200%/1 Rockwell, serif;} </style></head><body><h1>CSS</h1><h1><svg overflow="visible" width="2em" height="1.2em"><use xlink:href="#css" /><text  y="1em">CSS</text></svg></h1></body>
</html>
  • 1
  • 2
  • 3

8.3 文字外发光效果—— text-shadow

文字外发光效果常用于凸显标题，或给链接添加鼠标悬停效果

只需要准备几层重叠的 text-shadow 即可，不需要考虑偏移量，颜色也只需跟文字保持一致

<!DOCTYPE html>
<html><head><style> body {background: #203;font: bold 500%/1 Rockwell, serif;}a {color: #ffc;text-decoration: none;transition: 1s;}a:hover {text-shadow: 0 0 0.1em, 0 0 0.3em;} </style></head><body><a href="">Glow</a></body>
</html>
  • 1
  • 2
  • 3

8.4 文字凸起效果

主要思路就是使用一长串累加的投影，不设模糊并以 1px 的跨度逐渐错开，使颜色逐渐变暗，然后在底部加一层强烈模糊的暗投影，从而模拟完整的立体效果

<!DOCTYPE html>
<html><head><style> body {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;font: bold 500%/1 Rockwell, serif;} </style></head><body>CSS3d</body>
</html>
  • 1
  • 2
  • 3
<template><h1>LXL long</h1>
</template>

<script>
export default {name: "AboutView"
}
</script>
<style lang="scss" scoped>

@mixin text-3d($color: white, $depth: 5) {$shadows: (); $shadow-color: $color;@for $i from 1 through $depth {$shadow-color: darken($shadow-color, 10%);$shadows: append($shadows,0 ($i * 1px) $shadow-color, comma);}color: $color;/* append() 函数是用来将某个值插入到列表中，并且处于最末位。*/text-shadow: append($shadows,0 ($depth * 1px) 10px black, comma);
}
h1 { @include text-3d(#eee, 4); }
</style>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

9. 环形文字——SVG

让一个短句沿着圆形的路径进行排列

SVG 原生支持以任意路径排队的文字，而圆形只不过是一种特定的路径而已

<!DOCTYPE html>
<html><head><style> body {font: bold 120% Helvetica, sans-serif;}.circular {width: 30em;height: 30em;margin: 4em auto 0;}.circular svg {display: block;overflow: visible;transition: 10s linear transform;}.circular svg:hover {transform: rotate(-2turn);}.circular text {fill: currentColor;}.circular path {fill: none;} </style></head><body><div class="circular">circular reasoning works because</div></body><script> // 这段脚本会遍历所有设置了 circular 类的元素，将其文本内容删除并//保存在变量中，然后为其填入必要的 SVG 元素function $$(selector, context) {context = context || document;var elements = (selector);return (elements);}$$(".circular").forEach(function(el) {var NS = "http:///2000/svg";var svg = (NS, "svg");("viewBox", "0 0 100 100");var circle = (NS, "path");("d", "M0,50 a50,50 0 1,1 0,1z");("id", "circle");var text = (NS, "text");var textPath = (NS, "textPath");("http:///1999/xlink","xlink:href","#circle"); = ;(textPath);(circle);(text); = "";(svg);}); </script>
</html>
  • 1
  • 2
  • 3

最后

最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。



有需要的小伙伴，可以点击下方卡片领取，无偿分享

相关文章