目录
一，引入外部字体
1.字体格式
2.使用步骤
A.将字体文件添加到项目中：
B.声明引入的字体族（Font Family）：
C.在设置css字体的时候，使用声明的字体族
相关代码
二，文字阴影
设置文字阴影
设置多个阴影
相关代码
总结
一，引入外部字体
1.字体格式
字体格式
1.ttf：专门用于标准浏览器和android等（最常用）
2.svg： 支持ios
3.eot： 仅支持IE浏览器
4.woff： 支持火狐或谷歌
2.使用步骤
A.将字体文件添加到项目中：
将你想要使用的字体文件（通常是带有字体文件扩展名的文件，如.ttf、.otf、.woff、.woff2）添加到你的项目目录中。
B.声明引入的字体族（Font Family）：
在 CSS 文件中，使用 @font-face 规则声明外部字体。在 @font-face 规则中，你需要指定字体文件的路径和字体族的名称。例如：
@font-face { font-family: 'FontName'; /* 指定字体名称 */ src: url('path-to-font-file.ext'); /* 指定字体文件的路径和文件名 */ }
C.在设置css字体的时候，使用声明的字体族
确保将
'FontName'替换为你想要使用的字体名称，并将'path-to-font-file.ext'替换为字体文件的路径和文件名。
- 使用声明的字体族：在你希望应用该字体的元素选择器中，使用
font-family属性来指定声明的字体族。例如：body { font-family: 'FontName', sans-serif; }在这个示例中，字体名称
'FontName'将应用于body元素，如果字体无法加载，则将回退到 sans-serif 字体。
通过按照这些步骤进行操作，你可以将外部字体引入到你的网页中，并在指定的元素上应用该字体。确保字体文件路径正确，并使用正确的字体名称进行声明。此外，考虑使用不同的字体格式（如 .woff 和 .woff2），以支持不同类型的浏览器，并提高跨浏览器的兼容性。
相关代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
@font-face{
font-family: 'bhd';
src: url(./font/J015-hkgyokk.ttf);
}
.txt{
font-size: 30px;
font-family: 'bhd';
color: #f00;
}
</style>
</head>
<body>
<!--
引入外部字体
字体格式
1.ttf：专门用于标准浏览器和android等（最常用）
2.svg： 支持ios
3.eot： 仅支持IE浏览器
4.woff： 支持火狐或谷歌
使用步骤
1.将字体迎入到项目中
2.声明引入的字体族
3.在设置css字体的时候，使用声明的字体族
声明字体族的方式
@font-face{
font-family: '自定义的字体族名字';
src: url('字体族资源地址');
}
-->
<p class="txt">黄河的水天上来</p>
</body>
</html>二，文字阴影
设置文字阴影
text-shadow：x轴偏移 y轴偏移 模糊度 阴影颜色
设置多个阴影
如果需要设置多个阴影就使用英文逗号隔开
单个阴影
text-shadow: 0px 0px 10px #f60;
多个阴影
text-shadow: 0px 10px 10px #f60，0px 20px 10px #f60，10px 0px 10px #f60;
相关代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
@font-face{
font-family: 'xi';
src: url(./font/J015-hkgyokk.ttf);
}
.txt{
font-family: 'xi';
font-size: 40px;
/* 设置阴影 */
text-shadow: 0px 0px 10px #f60;
margin: 50px 0;
text-align: center;
}
.txt1{
width: 600px;
height: 200px;
line-height: 200px;
color: rgb(178, 235, 8);
background: #000;
text-align: center;
margin: 0 auto;
font-family: 'xi';
font-size: 60px;
text-shadow: 0 -5px 5px rgb(255, 47, 0),0 -6px 5px rgb(255, 0, 0),0 -10px 15px #f60;
}
.txt2{
width: 600px;
height: 200px;
margin: 20px auto;
text-align: center;
line-height: 200px;
font-family: 'xi';
font-size: 60px;
text-shadow:
.0300px -10px 2px#f00;
}
</style>
</head>
<body>
<!--
设置文字阴影
text-shadow：x轴偏移 y轴偏移 模糊度 阴影颜色
如果需要设置多个阴影就使用英文逗号隔开
单个阴影
text-shadow: 0px 0px 10px #f60;
多个阴影
text-shadow: 0px 10px 10px #f60，0px 20px 10px #f60，10px 0px 10px #f60;
-->
<p class="txt">两情若是久长时，又岂在朝朝暮暮</p>
<p class="txt1">千里冰封，万里雪飘</p>
<p class="txt2">中国远征军</p>
</body>
</html>总结
引入外部字体的意义：
-
扩展字体选择：通过引入外部字体，能够在网页中使用非系统默认的字体，从而为设计师提供更多的字体选择。这有助于提升网页的品味和独特性。
-
品牌一致性：某些品牌或项目可能有自己的定制字体，通过引入外部字体，可以确保在整个网站或应用中保持一致的字体风格，增加品牌识别度。
-
提升用户体验：使用合适的字体可以提升网页的可读性和可视化效果，从而提升用户的阅读体验和留存率。
文字阴影的意义：
-
视觉强调效果：文字阴影可以为文字增加立体感和深度感，使文字在页面上更加突出。通过调整阴影的颜色、模糊程度和偏移量等属性，可以制作出各种视觉效果，例如阴影投射、发光等。
-
提高可读性：适当的文字阴影可以使文字与背景之间产生更好的对比度，从而提高文字的可读性，尤其是当文字与背景颜色相近或对比度较低时。
-
创造艺术效果：文字阴影也可以用于创造艺术效果，在设计中起到装饰和美化的作用。你可以根据需求调整阴影的样式，创造出独特的排版效果。
引入外部字体和使用文字阴影的用法：
-
引入外部字体：前面已经提到了引入外部字体的步骤。你需要选择适合的字体文件，将其添加到项目中，并在 CSS 文件中使用 @font-face 规则进行声明。然后，通过 font-family 属性将字体应用到指定的元素上。
-
使用文字阴影：在 CSS 中，你可以使用 text-shadow 属性来为文字添加阴影效果。该属性接受一组值，包括阴影的颜色、模糊程度和偏移量等。通过调整这些值，可以实现不同的阴影效果。例如：
h1 {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
在这个示例中，h1 元素的文字将添加一个模糊程度为 4px，颜色为半透明黑色（rgba(0, 0, 0, 0.5)）的阴影，阴影偏移量为 2px。
综上所述，引入外部字体和使用文字阴影是前端开发中常用的技巧，它们可以提升网页的设计和用户体验，帮助实现独特的排版效果和视觉效果。文章来源：https://www.toymoban.com/news/detail-758511.html
文章来源地址https://www.toymoban.com/news/detail-758511.html
到了这里，关于前端必知：30.引入外部字体以及文字阴影的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
