CSDN个人简介优化 html font属性

news2024/11/15 7:40:14

CSDN个人简介优化 html font属性

  • 个人简介
  • 个人简介优化
  • 字体21种样式选择
  • 字体大小设置
    • 4号字体
  • 字体颜色设计
    • 渐变色(可惜不能显示)
  • 字体加粗设置 `<b>`标签

个人简介

请添加图片描述

🌈你好呀!我是 是Yu欸
🌌 2024每日百字篆刻时光,感谢你的陪伴与支持 ~
🚀 欢迎一起踏上探险之旅,挖掘无限可能,共同成长!

个人简介优化

虽然CSS来控制文本样式,提供更强大、灵活和现代的样式控制方式。但是很可惜,经过一番尝试发现CSDN自带的makedown编辑器好像暂不支持。

因此咱们先一起来复习一下<font>标签,然后尝试通过<font>标签展示更个性化的个人简介。

<font>标签是HTML4的标签之一,用于控制文本的字体、颜色和大小。虽然它在HTML5中已经不再被推荐使用,但仍然可以在HTML4文档中使用。

<font>标签可以设置以下属性:

  1. face:用于指定字体系列的名称。例如:<font face="Arial, sans-serif">将尝试使用Arial字体,如果不可用,则使用系统默认的无衬线字体。

  2. color:用于设置文本的颜色。可以使用颜色名称(如"red")或十六进制颜色代码(如"#FF5733")。

  3. size:用于设置字体大小。可以使用相对大小(1-7,其中1是最小的,7是最大的),或绝对大小(像素、磅等)。

  4. align:用于控制文本的水平对齐方式,可以设置为"left"、“center”、“right”。

  5. background:用于设置文本的背景颜色。

  6. letter-spacing:用于设置字符间距。

  7. line-height:用于设置行高。

  8. style:用于应用额外的CSS样式,但这不是标准属性。

字体21种样式选择

HTML中的<font>标签不支持直接指定"行楷"等字体系列名称。要在HTML中使用特定字体,通常需要使用该字体的通用名称或字体族,例如"楷体"(KaiTi)。

以下是一些不同字体样式的示例,其中包括"楷体"(KaiTi)以及其他常见的字体:

(电脑端可以正常显示,手机端好像不太行,所以我补一个图吧)
在这里插入图片描述

💫 每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 每日百字篆刻时光,感谢你的陪伴与支持 ~

字体大小设置

size:用于设置字体大小。可以使用相对大小(1-7,其中1是最小的,7是最大的),或绝对大小(像素、磅等)。
在这里插入图片描述

💫 每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 每日百字篆刻时光,感谢你的陪伴与支持 ~

4号字体

在这里插入图片描述

💫 1每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 2每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 3每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 4每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 5每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 6每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 7每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 8每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 9每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 10每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 11每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 12每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 13每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 14每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 15每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 16每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 17每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 18每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 19每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 20每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 21每日百字篆刻时光,感谢你的陪伴与支持 ~

字体颜色设计

在这里插入图片描述

💫 每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 每日百字篆刻时光,感谢你的陪伴与支持 ~

在这里插入图片描述

💫 每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 每日百字篆刻时光,感谢你的陪伴与支持 ~

渐变色(可惜不能显示)

要在文本中使用渐变色,通常需要使用CSS的background-image属性或linear-gradient背景。<font>标签本身并不支持直接设置渐变色文本颜色。以下是一个示例,使用CSS的linear-gradient为文本创建渐变色效果:

<center>
  <div style="background-image: linear-gradient(to right, #FF5733, #33FF57); -webkit-background-clip: text; color: transparent; font-size: 24px; display: inline;">
    💫 每日百字篆刻时光,感谢你的陪伴与支持 ~
  </div>
</center>

在这个示例中,background-image属性使用了linear-gradient来创建一个从左到右的渐变色背景,颜色从#FF5733#33FF57变化。-webkit-background-clip: text;color: transparent;使文本具有渐变色效果,font-size属性用于设置字体大小,display: inline;用于将文本水平居中。可以根据需要调整渐变色和其他样式属性。

在这里插入图片描述


字体加粗设置 <b>标签

要在使用标签的文本中加粗字体,可以使用<b>标签或<strong>标签来包裹文本。以下是示例代码:
在这里插入图片描述

💫 每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 每日百字篆刻时光,感谢你的陪伴与支持 ~
💫 每日百字篆刻时光,感谢你的陪伴与支持 ~

这就是本期的全部内容,欢迎点赞关注支持!如果有其他的样式,可以分享到评论区噢!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1536826.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

element的el-table自定义最后一行

场景&#xff1a; 最后一行要显示一些其他结果&#xff0c;用的是element ui 自带的数据总计的属性&#xff1b;返回一个数组&#xff0c;会按下标进行展示。 代码&#xff1a; <el-table :summary-method"getSummaries"show-summary :data"tableData"…

牛客周赛 Round 37 C.红魔馆的馆主

非常恶心的诈骗&#xff0c;手玩了半小时&#xff0c;发现了一堆规律&#xff0c;比如是11的倍数的偶数数位和奇数数位要相等 还搞上了逆元&#xff0c;是5的倍数必须0 or 5结尾&#xff0c;是9的倍数必须数位之和是9的倍数结果做不出来 然后不是构造是纯纯的暴搜 直接暴力看…

JavaScript中的Lexical Environment

概要 本文主要介绍JavaScript中的一个重要概念Lexical Environment&#xff0c;它可以帮助我们解释我们为什么可以通过嵌套方法&#xff0c;共享数据&#xff0c;以及为什么可以在函数中定义一个和全局变量同名的变量&#xff0c;并且不会影响到全局变量。 基本分析 基本概念…

国产之光?Kimichat大模型200万字超长上下文突破

Kimi Chat简介 Kimi是AI大模型初创企业月之暗面&#xff08;Moonshot&#xff09;推出的AI产品。近日月之暗面宣布Kimi 智能助手在长上下文窗口技术上再次取得突破&#xff0c;无损上下文长度提升了一个数量级到200万字。 月之暗面&#xff08;Moonshot AI&#xff09;&#…

leetcode刷题(javaScript)——BFS广度优先遍历相关场景题总结

广度优先搜索&#xff08;BFS&#xff09;在JavaScript编程中有许多实际应用场景&#xff0c;特别是在解决图、树等数据结构相关问题时非常常见。在JavaScript中&#xff0c;可以使用队列来实现广度优先搜索算法。通过将起始节点加入队列&#xff0c;然后迭代地将节点的邻居节点…

鸿蒙Harmony应用开发—ArkTS-全局UI方法(文本滑动选择器弹窗)

根据指定的选择范围创建文本选择器&#xff0c;展示在弹窗上。 说明&#xff1a; 该组件从API Version 8开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 本模块功能依赖UI的执行上下文&#xff0c;不可在UI上下文不明确的地方使用&#xf…

python中医学习服务管理系统flask-django-php-nodejs

随着世界经济信息化、全球化的到来和互联网的飞速发展&#xff0c;推动了各行业的改革。若想达到安全&#xff0c;快捷的目的&#xff0c;就需要拥有信息化的组织和管理模式&#xff0c;建立一套合理、动态的、交互友好的、高效的中医学习服务管理系统。当前的信息管理存在工作…

三星再造AI家电的标杆,一次“实用主义”的胜利

作者 | 曾响铃 文 | 响铃说 随着以「智能科技&#xff0c;创享生活」为主题的2024AWE如期而至&#xff0c;上千家参展商带着自家产品登台唱戏&#xff0c;也让来到现场的观众大饱眼福。 作为中国家电及消费电子产业的风向标&#xff0c;AWE向来也是品牌方大秀肌肉的舞台&…

【Internet结构和ISP,分组延时、丢失和吞吐量】

文章目录 一、Internet结构和ISP1.互联网络结构&#xff1a;网络的网络2.Internet 结构&#xff1a;network of networks 二、分组延时、丢失和吞吐量1.分组丢失和延时是怎样发生的&#xff1f;2.四种分组延时3.分组丢失4.吞吐量 一、Internet结构和ISP 1.互联网络结构&#x…

python 教你如何创建一个自定义库 colorlib.py

目录 Colorlib 生成代码 模块代码 导入测试 测试一 测试二 应用测试 颜色列表 colorList 随机颜色元组 randcolorTuples 随机颜色字串 randcolorStrings Color类测试 测试一 测试二 题外话 Colorlib 有没有碰到过这样的场景&#xff1a;写代码时想要用上丰富的色…

吃瓜Grok大模型

段子区 今年当地时间2月29日晚&#xff0c;马斯克闹出来一件大事——正式起诉OpenAI和Sam Altman&#xff0c;并要求OpenAI 恢复开源GPT-4等模型。国际流量大师我只付服马斯克和川宝!&#xff01; 当大家觉得这扯皮的故事就此结束后&#xff0c;马斯克“不负众望”的整了一个大…

[MySQL实战] 如何定义唯一约束(唯一索引)

文章目录 一、什么是唯一约束二、如何定义唯一约束2.1、建表时定义唯一约束--方法12.2、建表时定义唯一约束--方法22.3、为已创建的表定义唯一约束 三、删除唯一约束四、问题4.1、问题1&#xff1a;如何为多个列定义唯一约束&#xff1f; 五、总结 一、什么是唯一约束 唯一约束…

C语言学习 四、选择与循环

4.1关系表达式与逻辑表达式 算术运算符的优先级高于关系运算符关系运算符的优先级高于逻辑与 和 逻辑或运算符相同优先级的运算符从左到右进行结合 【例】 表达式 5 > 3 && 8 < 4 - !0 的最终值为多少 4.2 if-else语句 4.2.1 if-else单分支语句 if判断条件&am…

使用OpenCV将图片切割成小图 及图片拼接(附python代码)

文章目录 1. 图片切割2. 图片拼接3. AcknowledgmentReference 要分割的图片如下&#xff1a; 1. 图片切割 思路也比较简单&#xff0c;代码注释比较详细&#xff0c;看代码就行。 from cv2 import cv2 import numpy as np import ospic_path .jpg # 分割的图片的位置 pic_ta…

【嵌入式——QT】QWT应用

【嵌入式——QT】QWT应用 概述步骤一步骤二步骤三代码声明代码实现图示 概述 QWT&#xff0c;全称Qt Widgets for Technical Applications&#xff0c;是一个基于Qt开发的第三方库。它主要为具有技术背景的程序提供GUI组件和一组实用类&#xff0c;用于生成各种统计图。QWT的主…

【CPP】C++11多线程

thread类 在C11之前&#xff0c;涉及到多线程问题&#xff0c;都是和平台相关的&#xff0c;比如windows和linux下各有自己的接口&#xff0c;这使得代码的可移植性比较差。C11中最重要的特性就是对线程进行支持了&#xff0c;使得C在并行编程时不需要依赖第三方库&#xff0c…

深度学习500问——Chapter04:经典网络解读(1)

文章目录 4.1 LeNet-5 4.1.1 模型介绍 4.1.2 模型结构 4.1.3 模型特性 4.2 AlexNet 4.2.1 模型介绍 4.2.2 模型结构 4.2.3 模型特性 4.3 ZFNet 4.3.1 模型介绍 4.3.2 模型结构 4.3.3 模型特性 4.4 Network in Network 4.4.1 模型介绍 4.4.2 模型结构 4.4.3 模型特性 4.1 LeNet-…

60、服务攻防——中间件安全CVE复现weblogicJenkinsGlassFish

文章目录 weblogicJbossJenkinsGlassFish weblogic 默认端口&#xff1a;7001&#xff0c;历史漏洞&#xff1a;CVE_2017_3506、CVE_2018_2893、CVE_2018_3245、CVE_2020_14882、CVE_2021_2394 Jboss 历史漏洞&#xff1a;CVE-2017-12149、CVE-2017-7504 Jenkins GlassFis…

安卓 Android Activity 生命周期

文章目录 Intro生命周期方法 & 执行顺序结论code Intro 本文提供一个测试类通过打印的方式展示在多个Activity之间互相跳转的时候&#xff0c;各个Activity的生命周期相关方法的执行顺序。 生命周期方法 & 执行顺序结论 下图出自 郭霖 《第一行代码&#xff08;第二…

深度学习pytorch——激活函数损失函数(持续更新)

论生物神经元与神经网络中的神经元联系——为什么使用激活函数&#xff1f; 我们将生物体中的神经元与神经网络中的神经元共同分析。从下图可以看出神经网络中的神经元与生物体中的神经元有很多相似之处&#xff0c;由于只有刺激达到一定的程度人体才可以感受到刺激&#xff0c…