Web前端开发笔记——第三章 CSS语言 第八节 CSS3文本文字设置

简介: Web前端开发笔记——第三章 CSS语言 第八节 CSS3文本文字设置

前言


本节中的仅支持CSS3中的新语法,比如文字的阴影、长文本的换行等等。


一、文本阴影


通过定义text-shadow来对文本进行阴影设置,其属性依次是水平阴影距离、垂直阴影距离、阴影的大小、阴影颜色。

如下代码,css代码:

p {
    font: italic bold 20px/2em '幼圆';
    text-shadow: 2px 2px 2px red;
}

html代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="../CSS/style.css" />
</head>
<body>
    <p>
        HTML的英文全称是 Hyper Text Markup Language,即超文本标记语言。
    </p>
</body>
</html>

运行结果如下:

1667095529071.jpg


二、强制换行


可以通过使用word-wrap来对长文本或URL进行强制的换行,其属性默认为normal,以及break-word。

如下代码,css代码:

p {
    height: 150px;
    width: 100px;
    border: 1px solid blue;
    font: italic bold 20px/2em '幼圆';
    text-shadow: 2px 2px 2px red;
    word-wrap: break-word;
}

html代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="../CSS/style.css" />
</head>
<body>
    <p>
        Hyper Text Markup Language
    </p>
</body>
</html>

运行结果如下:

1667095558309.jpg


三、字体设置


可以通过@font-face来使用引入自己想使用的字体,该字体在计算机上是没有的,即该字体是在@font-face中定义的。

首先在html文件的head标签内定义<style></style>标签,以@font-face开头,其中包括font-family属性和src属性,font-family定义字体的名称,src:url()中包括该字体的来源,如下:

1667095571374.jpg

而当我们要引用我们设置的字体文件时,即在标签中通过font-family后接该其字体名称即可,如下:

1667095579918.jpg



相关文章
|
3月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
Animation属性 css3为Animation动画提供的几个属性如下: 属性名 属性值 animation-name 指定动画名称,该属性指定一个已有的关键帧定义。 animation-duration 指定动画持续时间。 animation-timing-funtion 指定动画变化速度。 animation-delay 指定动画延迟多长时间才开始执行。 animation-iteration-count 指定动画的循环执行次数。 animation:这是一个复合属性。
312 2
|
9月前
|
人工智能
WEB CAD 利用AI编程实现多行文本的二次开发
本文介绍了在MxCAD插件中实现自定义编辑器实体类的功能,重点展示如何通过MxCADMText类在CAD中渲染和管理富文本。文章详细说明了注册同心圆实体文本的步骤,包括实现自定义文本类、注册自定义文本以及交互式修改参数的方法。此外,还扩展实践了粗糙度实体文本的注册与应用,涵盖构造粗糙度自定义实体文本类、注册及初始化过程,并通过示例图展示了运行效果。这些功能可帮助用户将复杂图形以文本形式插入多行文本中,提升项目设计效率。
|
10月前
|
前端开发 JavaScript API
给Web开发者的HarmonyOS指南01-文本样式
本系列教程适合 HarmonyOS 初学者,为那些熟悉用 HTML 与 CSS 语法的 Web 前端开发者准备的。
351 5
给Web开发者的HarmonyOS指南01-文本样式
|
11月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
338 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
319 6
|
前端开发 JavaScript UED
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
212 5
|
Web App开发 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用CSS3,打造炫酷视觉效果!
【10月更文挑战第31天】前端开发面临复杂布局的挑战,本文介绍了几种提升开发效率和代码质量的工具和技术。基础的HTML和CSS可以应对大部分布局需求,而Firefox开发者工具、VS Code、Vue、React等则能应对更复杂的布局,帮助开发者构建高性能、用户友好的网页应用。
314 4
|
人工智能 搜索推荐 API
用于企业AI搜索的Bocha Web Search API,给LLM提供联网搜索能力和长文本上下文
博查Web Search API是由博查提供的企业级互联网网页搜索API接口,允许开发者通过编程访问博查搜索引擎的搜索结果和相关信息,实现在应用程序或网站中集成搜索功能。该API支持近亿级网页内容搜索,适用于各类AI应用、RAG应用和AI Agent智能体的开发,解决数据安全、价格高昂和内容合规等问题。通过注册博查开发者账户、获取API KEY并调用API,开发者可以轻松集成搜索功能。
|
存储 前端开发 安全
详解CSS之Web 字体
详解CSS之Web 字体
188 4
|
编解码 前端开发 JavaScript
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
374 2

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    715
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    312
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    265
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    218
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    320
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    459
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    202
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    150
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    216
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    292