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>标签来包裹文本。以下是示例代码:
在这里插入图片描述

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

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

spring cloud项目微服务间互相调用使用自定义标注进行鉴权方案

来吧&#xff0c;贴代码。 一、背景 我们有一个项目使用了spring cloud&#xff0c;有的微服务需要调用别的微服务&#xff0c;但这些调用没有鉴权&#xff1b;当初项目时间非常紧&#xff0c;同时这部分微服务有的对外也没有鉴权&#xff0c;在代码中设置了无须鉴权&#xf…

三连杆滑块机构运动学仿真 | 【Matlab源码+理论公式文本】|曲柄滑块 | 曲柄连杆 | 机械连杆

【程序简介】&#x1f4bb;&#x1f50d; 本程序通过matlab实现了三连杆滑块机构的运动学仿真编程&#xff0c;动态展现了三连杆机构的运动动画&#xff0c;同时给出了角位移、角速度和角加速度的时程曲线&#xff0c;除了程序本身&#xff0c;还提供了机构运动学公式推导文档…

【MySQL】MySQL用户管理

文章目录 一、用户1.用户信息2.创建用户3.删除用户4.修改用户密码 二、数据库的权限1.给用户授权2.回收权限 一、用户 如果我们只能使用root用户&#xff0c;这样存在安全隐患。这时&#xff0c;就需要使用MySQL的用户管理。 1.用户信息 我们安装mysql之后&#xff0c;会自动…

ATFX汇市:预期之外,瑞士央行率先降息!瑞郎对美元剧烈贬值

ATFX汇市&#xff1a;昨日&#xff0c;全球的交易者都在盯着美联储和英国央行的利率决议&#xff0c;期待在鲍威尔和贝利的讲话中窥见未来的利率路径。然而&#xff0c;被大部分人所忽略的瑞士央行&#xff0c;在昨日16:30的利率决议上&#xff0c;宣布降息25基点&#xff0c;将…

类对象的初始化过程与方法

类初始化过程与方法 一、类对象的初始化过程 1.初始化的过程 &#xff08;1&#xff09;对象在实例化的时候需要调用构造函数&#xff0c;如果对应的构造函数调用不了&#xff0c;这个对象是没有办法实例化的。 &#xff08;2&#xff09;构造函数的执行&#xff0c;是在内…

2024腾龙杯web签到题-初识jwt(签到:这是一个登录页面)

什么是 jwt? 它是 JSON Web Token 的缩写&#xff0c;是一个开放标准&#xff0c;定义了一种紧凑的、自包含的方式&#xff0c;用于作为JSON对象在各方之间安全地传输信息&#xff0c;该信息可以被验证和信任&#xff0c;因为它是数字签名的。它就是一种认证机制&#xff0c;…

接口自动化之操作mysql数据库!

在接口自动化测试过程中并不像UI自动化测试一样存在界面可以通过界面数据校验正确性&#xff0c;除了可以通过接口返回的数据校验还可以通过操作数据库校验数据&#xff0c;那么我们该如何做接口自动化的数据校验呢&#xff1f;这篇文章我们就讲解以mysql为例&#xff0c;讲解接…

项目系统使用异步业务流程(线程池详细实现)

❤ 作者主页&#xff1a;李奕赫揍小邰的博客 ❀ 个人介绍&#xff1a;大家好&#xff0c;我是李奕赫&#xff01;(&#xffe3;▽&#xffe3;)~* &#x1f34a; 记得点赞、收藏、评论⭐️⭐️⭐️ &#x1f4e3; 认真学习!!!&#x1f389;&#x1f389; 文章目录 异步化1.介绍…

雷卯有高强Ipp的多种电压ESD保护器件推荐

1.上海雷卯推出多种电压 高强Ipp ESD 防护器件 下表仅是部分展示。 3.USB PD 防浪涌方案 4.为什么需要高强Ipp ESD防护器件 硬件工程师常会遇到这种情况&#xff0c;我的PCB 板上电源也放ESD保护器件 了&#xff0c;但是当插拔电或上电瞬间ESD保护器件烧毁了&#xff0c;导致…

schweizer-electronic 公司 safedat2 操作使用说明

schweizer-electronic 公司 safedat2 操作使用说明

从上到下,深入理解LIN协议 及 进阶问题

目录 一、当LIN总线静默4s-10s时&#xff0c;节点自动进入休眠状态。这个“自动进入休眠状态”是怎么实现的&#xff1f;二、帧的架构设计2.1 问题提出2.2 帧设计 三、帧超时功能四、主节点如何接收从节点上报的数据&#xff1f;五、网络管理5.1 当功能开关关闭时&#xff0c;应…

乐得瑞科技PD协议芯片:OTG与充电并行,引领数据交互

在科技日新月异的今天&#xff0c;数据交互的方式对于我们的日常生活和工作都起到了至关重要的作用。但在OTG技术诞生之前&#xff0c;这一过程却显得相当繁琐和耗时。想象一下&#xff0c;你需要将数码相机的照片导入到笔记本电脑中&#xff0c;却不得不频繁地拔出内存卡&…

✅技术社区—使用Redis BitMap实现签到与查询历史签到以及签到统计功能

一、前言 签到是一个很常见的功能&#xff0c;如果使用数据库实现&#xff0c;那么用户一次签到&#xff0c;就是一条记录&#xff0c;假如有100万用户&#xff0c;平均每个用户每年签到次数为30次&#xff0c;则这张表一年的数据量为 3000 万条&#xff0c;一般签到记录字段不…

揭秘项目管理多重益处:加速产品上市、优化资源利用,提升质量与满意度等秘诀

一、引言 在飞速发展的商业环境中&#xff0c;项目管理已经成为企业成功的关键要素之一。正如项目管理大师哈罗德科兹纳所言&#xff1a;“项目管理不仅仅是关于完成任务的工具&#xff0c;更是一种战略武器&#xff0c;能够帮助企业获得竞争优势。”项目管理的好处多种多样&am…

Apache FtpServer在Windows上下载安装与使用

Apache FtpServer在Windows上下载安装与使用 1、Apache Ftp Server下载 进入apache官网 https://mina.apache.org/ftpserver-project/old-downloads.html 下载自己使用的版本。 Apache FtpServer 1.1.1及以下的版本需要JDK1.7的支持 Apache FtpServer 1.1.1以上的版本需要JDK…

Linux--任务管理与守护进程

目录 任务管理 进程组概念 作业概念 会话概念 补充 守护进程 基本概念 守护进程的查看 守护进程的创建 自己手写守护进程 使用系统调用函数创建守护进程 任务管理 进程组概念 每一个进程除了有一个进程ID之外&#xff0c;还有一个进程组ID&#xff0c;进程组是一个或…

新零售SaaS架构:线上商城系统架构设计

零售商家为什么要建设线上商城&#xff1f; 传统的实体门店服务范围有限&#xff0c;只能吸引周边500米以内的消费者。因此&#xff0c;如何拓展服务范围&#xff0c;吸引更多的消费者到店&#xff0c;成为了店家迫切需要解决的问题。 缺乏忠实顾客&#xff0c;客户基础不稳&a…

clickhouse突然启动不起来问题排查

场景&#xff1a; 在实现postgreql数据迁移到clickhouse中&#xff0c;想使用MaterializedPostgreSQL的功能实现&#xff0c;但是中途clickhouse突然挂了&#xff0c;就再启动不了了。 现象&#xff1a; systemctl start clcikhouse-server启动报错 [rootlocalhost clickhous…

python矢量算法-三角形变化寻找对应点

1.算法需求描述 现有随机生成的两个三角形A与B&#xff0c;在三角形A中存在Pa&#xff0c;使用算法计算出三角形B中对应的点Pb 2.python代码 import numpy as np # 计算三角形A的面积 def area_triangle(vertices): return 0.5 * np.abs(np.dot(vertices[0] - vertices[…

用python爬取CSDN博客的总字数

一、下载pycahrm 此处推荐博客&#xff1a;PyCharm安装教程&#xff0c;图文教程&#xff08;超详细&#xff09;-CSDN博客 二、安装相应的库 pycharm安装库的步骤&#xff1a; 1、打开pycharm&#xff1b; 2、在菜单栏中&#xff0c;选择 "file">"setti…