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.rhkb.cn/news/282593.html

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

相关文章

mysql查询条件包含IS NULL、IS NOT NULL、!=、like %* 、like %*%,不能使用索引查询,只能使用全表扫描,是真的吗???

不知道是啥原因也不知道啥时候, 江湖上流传着这么一个说法 mysql查询条件包含IS NULL、IS NOT NULL、!、like %* 、like %*%,不能使用索引查询&#xff0c;只能使用全表扫描。 刚入行时我也是这么认为的&#xff0c;还奉为真理&#xff01; 但是时间工作中你会发现还是走索引…

Games101Homework【0】Build an environment

Preface: I just want 放洋屁&#xff0c;and then learn graphics. So,This essay is born. I will show you the whole process of my study,Including the bugs I created. Cool lets begin! Download: BaiduNetworkDisk:from bilibili comment https://pan.baidu.com/…

Java后端八股-------并发编程

图中的 synchronized方法如果没有锁&#xff0c;那么可能会有超卖&#xff0c;数据错误等情况。 加锁之后会按顺序售卖。 synchronized的底层是monitor。 线程没有竞争关系的时候&#xff0c;引入了轻量级锁&#xff0c;当需要处理竞争关系的时候一定要用到重量级锁(线程的…

Java学习笔记(20)

可变参数 输入的参数数量不确定 底层就是把输入的参数放进一个数组里 只能写一个可变参数如果还有其他形参&#xff0c;可变参数要放在最后写 可变参数在底层就是一个数组 Collections Addall shuffle 练习 package exercise;import java.util.ArrayList; import java.util.C…

递增四元组

解法&#xff1a; 首先都可以想到dp[i]&#xff1a;第i个元素结尾的递增四元组有dp[i]个 然后发现有一组数据&#xff1a;2,3,6,1,5,8。会出现6结尾和5结尾的递增三元组&#xff0c;也就是未来的决策受过去影响&#xff0c;专业的说就是有后效性。需要强化约束条件&#xff0…

1.2 编译型语言和解释型语言的区别

编译型语言和解释型语言的区别 通过高级语言编写的源码&#xff0c;我们能够轻松理解&#xff0c;但对于计算机来说&#xff0c;它只认识二进制指令&#xff0c;源码就是天书&#xff0c;根本无法识别。源码要想执行&#xff0c;必须先转换成二进制指令。 所谓二进制指令&…

使用gimp制作头像

1.裁剪图像 &#xff08;1&#xff09;用GIMP打开图像。 &#xff08;2&#xff09;在工具箱中选中剪裁工具。 &#xff08;3&#xff09;在工具箱下边的工具选项中&#xff0c;勾选 固定→宽高比&#xff0c;并在下面的数值框中输入1:1。 &#xff08;4&#xff09;在图像中…

ginblog博客系统/golang+vue

ginblog博客系统 前台&#xff1a; 后台&#xff1a; Gitee的项目地址&#xff0c;点击进入下载 注意&#xff1a; 数据库文件导入在model里面&#xff0c;直接导入即可。 admin和front前后台系统记住修改https里的地址为自己的IP地址&#xff1a; front同上。

Springboot+vue的大学生选修选课系统的设计与实现(有报告)。Javaee项目,springboot vue前后端分离项目。

演示视频&#xff1a; Springbootvue的大学生选修选课系统的设计与实现&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot vue前后端分离项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;control…

显卡基础知识及元器件原理分析

显卡应该算是是目前最为火热的研发方向了&#xff0c;其中的明星公司当属英伟达。 当地时间8月23日&#xff0c;英伟达发布截至7月30日的2024财年第二财季财报&#xff0c;营收和利润成倍增长&#xff0c;均超市场预期。 财报显示&#xff0c;第二财季英伟达营收为135.07 亿美…

第十四届蓝桥杯JavaB组省赛真题 - 阶乘求和

/ 10^9考虑前九位&#xff0c;% 10^9保留后9位 解题思路: 求获取结果的后九位数字&#xff0c;需要对10^9取余&#xff0c;因为202320232023这个数字的阶乘太大&#xff0c;必须要减少计算量&#xff0c;因为当一个整数乘以10^9后对其取余&#xff0c;那么结果都为0。 所以我…

模拟B\S服务器(扩展知识点)

3.2 模拟B\S服务器(扩展知识点) 模拟网站服务器&#xff0c;使用浏览器访问自己编写的服务端程序&#xff0c;查看网页效果。 案例分析 准备页面数据&#xff0c;web文件夹。 复制到我们Module中&#xff0c;比如复制到day08中 我们模拟服务器端&#xff0c;ServerSocket类…

【C++ leetcode】双指针问题

1. 611. 有效三角形的个数 题目 给定一个包含非负整数的数组 nums &#xff0c;返回其中可以组成三角形三条边的三元组个数。 题目链接 . - 力扣&#xff08;LeetCode&#xff09; 画图 和 文字 分析 判断是否是三角形要得到三边&#xff0c;由于遍历三边要套三层循环&#x…

VC++ error C1001: 内部编译器错误 c\error.h”,第 1291 行) 原因和解决

原因是使用模板时实现方法没写分号 #include <iostream>template <class T> class A { public:A() {};~A() {};void GetName() {return}; };int main(int argc, char* argv[]) {return 0; }

ARM 点灯

实现三个LED灯灰 .text .global _start _start: 使能GPIOE GPIOF的外设时钟 RCC_MP_AHB4ENSETR的第[4][5]设置为1即可使能GPIOE GPIOF时钟 LDR R0,0X50000A28 指定寄存器地址 LDR R1,[R0] 将寄存器原来的数值读取出来&#xff0c;保存到R1中 ORR R1,R1,#(0x3<<4) …

Python Flask框架 -- 加载静态文件

在项目中&#xff0c;一般都会把静态文件放在 static 目录下&#xff0c;如 images、css、js 等&#xff0c;html 放在 templates 目录下。 .py&#xff1a; from flask import Flask, render_templateapp Flask(__name__)app.route(/static) def static_demo():return rend…

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

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

matlab simulink 二自由度机器手臂

1、内容简介 略 73-可以交流、咨询、答疑 2、内容说明 略 3、仿真分析 略 4、参考论文 略

SQLiteC/C++接口详细介绍之sqlite3类(十六)

返回目录&#xff1a;SQLite—免费开源数据库系列文章目录 上一篇&#xff1a;SQLiteC/C接口详细介绍之sqlite3类&#xff08;十五&#xff09; 下一篇&#xff1a; SQLiteC/C接口详细介绍之sqlite3类&#xff08;十七&#xff09;&#xff08;未发表&#xff09; 50.sqlite…

MySQL数据库-MySQL基础-下篇-函数、约束、多表查询、事务

文章目录 函数一、字符串函数练习 二、数值函数三、日期函数四、流程函数总结 约束概述约束演示外键约束概念语法删除/更新行为 总结 多表查询多表关系一对多&#xff08;多对一&#xff09;多对多一对一 多表查询概述内连接外连接自连接*联合查询-union, union all子查询标量子…