CSS学习笔记（十七）CSS 文本效果，Web 字体

最新推荐文章于 2022-09-13 21:23:51 发布

〔晴【天】º〕

最新推荐文章于 2022-09-13 21:23:51 发布

阅读量203

点赞数

分类专栏：前端学习文章标签： css html

本文链接：https://blog.csdn.net/qq_43625134/article/details/117196876

版权

前端学习专栏收录该内容

34 篇文章 1 订阅

订阅专栏

CSS Box Shadow

CSS box-shadow 属性

CSS box-shadow 属性应用阴影于元素。
最简单的用法是只指定水平阴影和垂直阴影：
为阴影添加颜色：
向阴影添加模糊效果：

div {
  box-shadow: 10px 10px 5px grey;
}

CSS 文本效果

CSS 文字溢出

CSS text-overflow 属性规定应如何向用户呈现未显示的溢出内容。

可以被裁剪：
也可以将其呈现为省略号（…）：
在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html>
<head>
<style> 
p.test1 {
  white-space: nowrap; 
  width: 200px; 
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: clip;
}

p.test2 {
  white-space: nowrap; 
  width: 200px; 
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
</head>
<body>

<h1>text-overflow 属性</h1>
<p>以下两段包含不适合其框的长文本。</p>

<h2>text-overflow: clip:</h2>
<p class="test1">这里有一些无法容纳在框中的长文本</p>

<h2>text-overflow: ellipsis:</h2>
<p class="test2">这里有一些无法容纳在框中的长文本</p>

</body>
</html>

将鼠标悬停在元素上时显示溢出的内容：

实例

div.test:hover {
  overflow: visible;
}

CSS 字换行（Word Wrapping）

CSS word-wrap 属性使长文字能够被折断并换到下一行。

如果一个单词太长而无法容纳在一个区域内，它会向外扩展
通过 word-wrap 属性，您可以强制对文本进行换行 - 即使这意味着在词中间将其拆分
实例
允许长单词被打断并换行到下一行：

p {
  word-wrap: break-word;
}

CSS 换行规则

CSS word-break 属性指定换行规则。
<!DOCTYPE html>
<html>
<head>
<style> 
p.test1 {
  width: 140px; 
  border: 1px solid #000000;
  word-break: keep-all;
  /* 将字符连接处打断 */
}

p.test2 {
  width: 140px; 
  border: 1px solid #000000;
  word-break: break-all;
  /* 将在任何字符处中断 */
}
</style>
</head>
<body>

<h1>word-break 属性</h1>

<p class="test1">This paragraph contains some text. This line will-break-at-hyphens.</p>

<p class="test2">This paragraph contains some text. The lines will break at any character.</p>


</body>
</html>

在这里插入图片描述

CSS 书写模式

CSS writing-mode 属性规定文本行是水平放置还是垂直放置。
实例

p.test1 {
  writing-mode: horizontal-tb; 
}

span.test2 {
  writing-mode: vertical-rl; 
}

p.test2 {
  writing-mode: vertical-rl; 
}

CSS Web 字体

CSS @font-face 规则

Web 字体允许 Web 设计人员使用用户计算机上未安装的字体。

当您找到/购买了想要使用的字体后，只需将字体文件包含在您的 Web 服务器上，它将在需要时自动下载给用户。

您的“自有”字体在 CSS @font-face 规则中进行定义。

不同的字体格式

TrueType 字体 (TTF)
TrueType 是 1980 年代后期由 Apple 和 Microsoft 开发的字体标准。 TrueType 是 Mac OS 和 Microsoft Windows 操作系统最常用的字体格式。

OpenType 字体 (OTF)
OpenType 是可缩放计算机字体的格式。它基于 TrueType 构建，并且是 Microsoft 的注册商标。今天，OpenType 字体在主要计算机平台上得到普遍使用。

Web 开放字体格式 (WOFF)
WOFF 是用于网页的字体格式。它于 2009 年开发，现已成为 W3C 的推荐标准。 WOFF 本质上是具有压缩和其他元数据的 OpenType 或 TrueType。目标是支持在有带宽限制的网络上从服务器到客户端进行字体分发。

Web 开放字体格式 (WOFF 2.0)
TrueType/OpenType 字体比 WOFF 1.0 提供更好的压缩。

SVG 字体/形状
SVG 字体允许在显示文本时将 SVG 用作字形。 SVG 1.1 规范定义了一个字体模块，该模块允许在 SVG 文档中创建字体。您还可以将 CSS 应用于 SVG 文档，同时 @font-face 规则可以应用于 SVG 文档中的文本。

嵌入式 OpenType 字体 (EOT)
EOT 字体是 Microsoft 设计的 OpenType 字体的紧凑形式，用作网页上的嵌入式字体。

使用您需要的字体

在 @font-face 规则中：首先定义字体的名称（例如 myFirstFont），然后指向该字体文件。

提示：字体 URL 始终使用小写字母。大写字母可能会在 IE 中产生意外结果。

如需将字体用于 HTML 元素，请通过 font-family 属性引用字体名称（myFirstFont）：

实例

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

div {
  font-family: myFirstFont;
}

使用粗体文本

您必须添加另一条 @font-face 规则，其中包含粗体文本的描述符：

实例

@font-face {
  font-family: myFirstFont;
  src: url(sansation_bold.woff);
  font-weight: bold;
}

文件 “sansation_bold.woff” 是另一个字体文件，其中包含 Sansation 字体的粗体字符。

每当带有 “myFirstFont” 字体族的一段文本应呈现粗体时，浏览器都会使用它。

这样，您就可以为同一字体设置许多 @font-face 规则。

〔晴【天】º〕

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记（十七）CSS 文本效果，Web 字体

CSS Box ShadowCSS box-shadow 属性CSS box-shadow 属性应用阴影于元素。最简单的用法是只指定水平阴影和垂直阴影：为阴影添加颜色：向阴影添加模糊效果：div { box-shadow: 10px 10px 5px grey;}CSS 文本效果CSS 文字溢出CSS text-overflow 属性规定应如何向用户呈现未显示的溢出内容。可以被裁剪：也可以将其呈现为省略号（…）：代码如下：<!DOCTYPE html>&lt
复制链接

扫一扫

专栏目录