CSDN个人简介优化 html font属性

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.mzph.cn/news/763537.shtml

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

相关文章

Django日志(四)

一、Filters介绍 过滤器用于从logger传递给handler的哪些日志要做额外控制 默认情况下,满足日志级别的任何消息都将处理。只要级别匹配,任何日志消息都会被处理。不过,也可以通过添加 filter 来给日志处理的过程增加额外条件。例如,可以添加一个 filter 只允许某个特定来源…

Linux 文件系统:动静态库

目录 一、静态库 1、概念 2、为什么要打包成库 3、创建自定义静态库 4、使用Makefile创建静态库 5、使用静态库(导入系统) 6、删除静态库 7、使用静态库(不导入系统) 二、动态库 1、概念 2、生成动态库&#xff08;共享库&#xff09; 3、使用动态库的过程 4、Mak…

Python学习笔记02

第三章、Python判断语句 前言 进行逻辑判断&#xff0c;是生活中常见的行为。同样&#xff0c;在程序中&#xff0c;进行逻辑判断也是最为基础的功能。 如果 → 判断 → 是 → ... → 否 → ... 布尔类型和比较运算符 布尔类型 进行判断&#xff0c;只有2个结果&#xff…

产品说明书怎么制作?学会用模板事半功倍!

产品说明书常常被低估&#xff0c;但其实它是一个企业的名片&#xff0c;在阐述你的产品服务时大有作用。如果你在制作产品说明书上面花费大量的时间和精力&#xff0c;那么今天的文章可能会对你有所帮助。此文将会引领你了解如何制作产品说明书&#xff0c;以及推荐几款高效的…

【JS面试题 - 打印结果】++[[]][+[]] + [+[]]

现有一段代码&#xff0c;说出打印结果 [[]][[]] [[]]这道题考验的是运算符的基础知识&#xff0c;下面来逐步分析&#xff1a; 先把表达式按照优先级最低的运算符&#xff08;&#xff09;进行分割&#xff0c;得到两部分&#xff1a; [[]][[]] 和 [[]] [[]][[]] 表达式中…

Redis 不再“开源”,对中国的影响及应对方案

Redis 不再“开源”&#xff0c;使用双许可证 3 月 20 号&#xff0c;Redis 的 CEO Rowan Trollope 在官网上宣布了《Redis 采用双源许可证》的消息。他表示&#xff0c;今后 Redis 的所有新版本都将使用开源代码可用的许可证&#xff0c;不再使用 BSD 协议&#xff0c;而是采用…

这些流行的银行木马,你都了解吗?

银行木马是一款对针对金融客户为目标&#xff0c;通过各种方式窃取客户网上银行凭证信息的恶意软件&#xff0c;最近几年一些银行木马不仅仅传播自己&#xff0c;还充当勒索病毒的分销商&#xff0c;传播勒索病毒&#xff0c;笔者今天给大家介绍一些比较流行的银行木马家族。 …

面试算法-85-删除有序数组中的重复项 II

题目 给你一个有序数组 nums &#xff0c;请你 原地 删除重复出现的元素&#xff0c;使得出现次数超过两次的元素只出现两次 &#xff0c;返回删除后数组的新长度。 不要使用额外的数组空间&#xff0c;你必须在 原地 修改输入数组 并在使用 O(1) 额外空间的条件下完成。 说…

【Web】记录巅峰极客2023 BabyURL题目复现——Jackson原生链

目录 前言 分析 EXP SignedObject打二次反序列化 打TemplatesImpl加载恶意字节码 前文&#xff1a;【Web】浅聊Jackson序列化getter的利用——POJONode 前言 题目环境:2023巅峰极客 BabyURL 之前AliyunCTF Bypassit I这题考查了这样一条链子&#xff1a; BadAttributeV…

通过rmi实现远程rpc(可以认为java自带Dubbo RPC)

背景&#xff1a; 发现公司几个运行10年的游戏&#xff0c;用的竟然是rmi&#xff0c;而我只听说过dubbo 和 基于netty的rpc&#xff0c;于是就补充了下rmi。 其次&#xff0c;是最近对于跨服的思考&#xff0c;如何避免回调也需要用同步写法&#xff0c;rmi比较适合。 1)api…

408学习笔记-16-C-动态内存管理

1、为什么要有动态内存分配 常规定义出来的变量&#xff0c;它们的大小都是已经规定好的&#xff0c;即在内存中开辟的内存空间都是固定的&#xff1b;且空间大小不可调整&#xff0c;可能会造成内存空间的浪费。 于是C语言引入了动态内存开辟功能&#xff0c;让程序员自己可…

IDEA/Android Studio格式化代码快捷键失效的解决

问题描述 用AS写一个项目的时候&#xff0c;发现CtrlAltL的格式化快捷键并不生效&#xff0c;按下之后没有任何反应。而格式化文件快捷键CtrlAltShiftL依旧生效&#xff0c;难道是设置出了问题&#xff1f; 打开设置页面发现快捷键设置很正确&#xff0c;并没问题&#xff0c…

综合能源系统多时间尺度优化调度研究综述

1.研究背景 随着全球能源需求的增长以及环境保护的压力&#xff0c;综合能源系统&#xff08;IES&#xff09;成为了实现能源可持续发展的关键方案之一。IES通过集成多种能源资源&#xff0c;优化能源的产、供、存、消过程&#xff0c;提高能源利用效率&#xff0c;减少环境污染…

「JS 基础」异步解决方案入门

前言 为了解决Javascript 语言的执行环境是单线程所带来的问题&#xff0c;Javascript 将任务的执行模式分为两种&#xff1a;同步和异步 同步即为后一个任务等待前一个任务结束再继续执行&#xff0c;程序的执行顺序与任务的排列顺序是一致的 异步则完全不同&#xff0c;每…

鸿蒙一次开发,多端部署(一)简介

背景 随着终端设备形态日益多样化&#xff0c;分布式技术逐渐打破单一硬件边界&#xff0c;一个应用或服务&#xff0c;可以在不同的硬件设备之间随意调用、互助共享&#xff0c;让用户享受无缝的全场景体验。而作为应用开发者&#xff0c;广泛的设备类型也能为应用带来广大的…

trinus 3d打印机安装调试到成功打印2-堵头处理挤出机喷头不出料

使用弹簧钢板而不是美文纸&#xff0c;由于这款打印机没有热床功能&#xff0c;所以为了加大附着需要将喷头距离设低一些&#xff0c;否则模型极容易打着中途脱落。 但是由于不能自动调平&#xff0c;而且不支持手动调整4个角的高度&#xff0c;在喷头距离设置不当的情况下&am…

面试题2.0

目录 css 动画 深拷贝和浅拷贝 ES6新特性 事件循环 vue-router原理 flex布局 session和local storage分别是用来干嘛的&#xff1f; http状态码 原型链 虚拟dom vuex的五个属性 vue路由跳转的四种方式 vue生命周期 link和import的区别 GET 与 POST 的区别 fle…

使用platformIO进行arduino,esp8266,esp32编程的性能改进和一些优化

目录 多环境配置 性能优化 多环境配置 平常的一些platformio的配置是这样的&#xff1a; [env:esp32dev] platform espressif32 board nodemcu-32s framework arduino monitor_speed 115200 upload_speed 921600 lib_deps ; painlessmesh/painlessMesh^1.5.0bodmer/TF…

python 实现把内层文件夹的文件,复制/剪切到外层文件夹

文章目录 如下图所示&#xff0c;收集了很多省市的文件&#xff0c;结果发现市一级的文件与区县一级的文件混在一起了。 接下来使用代码实现&#xff1a; 根据关键词识别出 市一级的文件&#xff1b;把市一级的文件&#xff0c;移动或者复制到省文件夹下&#xff1b;给出了py…

STM32-Flash闪存

简介 STM32F1系列的FLASH包含程序存储器、系统存储器和选项字节三个部分&#xff0c;通过闪存存储器接口&#xff08;外设&#xff09;可以对程序存储器和选项字节进行擦除和编程。 读写Flash的用途 1.利用程序存储器的剩余空间来保存掉电不丢失的用户数据。 2.通过在程序中…