当前位置: 首页 > news >正文

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

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

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

相关文章:

CSDN个人简介优化 html font属性

CSDN个人简介优化 html font属性 个人简介个人简介优化字体21种样式选择字体大小设置4号字体 字体颜色设计渐变色&#xff08;可惜不能显示&#xff09; 字体加粗设置 <b>标签 个人简介 &#x1f308;你好呀&#xff01;我是 是Yu欸 &#x1f30c; 2024每日百字篆刻时光…...

从哈希桶角度看 unordered_map 与 unordered_set 的实现

文章目录 一、引言二、C unordered系列的无序关联式容器概览三、基于哈希桶的C unordered系列数据结构模拟实现1、unordered_map的模拟实现2、unordered_set的模拟实现3、哈希桶及其迭代器实现的代码 四、扩展与应用1. 自定义哈希函数2. 其他unordered数据结构unordered_multim…...

飞天使-k8s知识点27-kubernetes温故知新2-deployment

文章目录 RC和RS无状态应用管理 deployment有状态应用statefulSetdaemonSet RC和RS RC不会使用在生产环境 RS 比RC 多了标签选择器 &#xff0c;RS 用deployment管理&#xff0c;用于容器编排无状态应用管理 deployment apiVersion: apps/v1 kind: Deployment metadata:name:…...

手机网页关键词视频爬虫采集软件可导出视频分享链接|视频无水印批量下载工具

全新音视频批量下载工具&#xff0c;为您解放视频管理烦恼&#xff01; 现如今&#xff0c;音上涌现出大量精彩的视频内容&#xff0c;但是要想高效地获取、管理和分享这些视频却是一件颇具挑战的事情。针对这一难题&#xff0c;我们自主研发了全新的音视频批量下载工具&#x…...

基于OpenCV的图像处理案例之图像矫正(Python)

Index 目录索引 写在前面解决思路参考 写在前面 本文通过一个案例介绍如何使用OpenCV将倾斜的扫描文档图像进行水平矫正。 解决思路 因为扫描图像中的大部分文字倾斜后&#xff0c;同一行文字也在同一条直线&#xff0c;所以可以通过拟合直线来计算文本倾斜角度&#xff0c;…...

创建linux虚拟机系统:(安装Ubuntu镜像文件,包含语言设置、中文输入法、时间设置)

我下载的是清华大写开源软件镜像站中的ubuntu-20.04.6-desktop-amd64.iso这个镜像文件&#xff0c; 这个文件我下载完成之后没有解压&#xff0c;直接在创建虚拟机的时候选择的压缩包。 地址为&#xff1a;Index of /ubuntu-releases/20.04/ | 清华大学开源软件镜像站 | Tsin…...

3.0 V-22V 宽输入电压,高效率异步升压芯片-ZCC5429

一、产品综述 ZCC5429 芯片是一款自动调频、最高 600KHz工作频率、高效率、宽输入电压范围的电流模式异 步升压&#xff08;BOOST&#xff09;芯片&#xff0c;且可调输入限流功能。用户可灵活地通过外部补偿建立动态环路&#xff0c;获得在所有条件下最优瞬态性能。 ZCC542…...

Sphinx + Readthedocs 避坑速通指南

博主在学习使用 Sphinx 和 Read the docs 的过程中&#xff0c; 碰到了许多奇葩的 bug, 使得很简单的任务花费了很长的时间才解决&#xff0c;现在在这里做一个分享&#xff0c;帮助大家用更少的时间高效上线文档的内容。 总的来说&#xff0c; 任务分为两个部分&#xff1a; …...

IPP-7010 表面贴装 90 度混合耦合器

IPP-7010 表面贴装 90 度混合耦合器 IPP-7010 是一款表面贴装 90 度混合耦合器&#xff0c;工作频率为 800 至 2500 MHz&#xff08;0.8 至 2.5 GHz&#xff09;&#xff0c;平均额定功率为 200 瓦。IPP-7010 采用 0.40 x 1.80 英寸表面贴装封装。IPP-7010的幅度平衡小于0.6dB&…...

25.2 微服务Dubbo

25.2 微服务Dubbo 1. Dubbo简介2. RPC3. Dubbo工作原理4. 代码实操4.1 父项目1. 依赖4.2 服务提供者1. 依赖2. 配置文件3. 启动类4. 业务类4.3 服务消费者1. 依赖2. 配置文件3. 消费者启动类4. 业务:实现远程调用...

CI/CD环境搭建

服务简介 Gitlab 官网&#xff1a;https://about.gitlab.com/ GitLab 是一个用于仓库管理系统的开源项目&#xff0c;使用Git作为代码管理工具&#xff0c;并在此基础上搭建起来的Web服务。安装方法是参考GitLab在GitHub上的Wiki页面。Gitlab是被广泛使用的基于git的开源代码管…...

API调试管理工具Postman下载及操作介绍

1.下载安装postman地址&#xff1a;https://www.getpostman.com/downloads/ 2.创建项目 3.创建请求API 然后点击save保存api 4.用一个变量保存主域名&#xff0c;方便后续操作 就类似下面的baseurl 5.创建新环境 6.添加变量&#xff08;如添加本地测试环境url——ba…...

vue集成百度地图,实现关键字搜索并自定义覆盖物,保存成静态图片

vue集成百度地图&#xff0c;实现关键字搜索并自定义覆盖物 index.html引入百度地图js <script type"text/javascript" src"https://api.map.baidu.com/api?v2.0&typewebgl&akxxxxxxwMprS7jIfPt354VdgP"></script>vue页面代码 <…...

Java中的Stream流

一、介绍 1. Stream流的作用 结合了Lambda表达式&#xff0c;简化集合、数组的操作。 2. Stream流的使用步骤 ①先得到一条Stream流&#xff0c;并把数据放上去&#xff1b; 获取方式方法名说明单列集合default Stream<E> stream()Collection中的默认方法双列集合无无…...

前端UI怎么防止用户反复提交?

方法1&#xff1a;禁用按钮 用户点击“xxx”按钮后&#xff0c;先禁用按钮&#xff0c;防止用户多次点击&#xff1b;待请求完成后&#xff0c;再解禁按钮。 方法2&#xff1a;防抖&#xff08;Debouncing&#xff09; 防抖是一种技术&#xff0c;它可以延迟执行函数&#xff0…...

OpenHarmony游戏应用程序-实现的一个手柄游戏

介绍 本篇Codelab是基于TS扩展的声明式开发范式编程语言&#xff0c;以及OpenHarmony的分布式能力实现的一个手柄游戏。 说明&#xff1a; 本示例涉及使用系统接口&#xff0c;需要手动替换Full SDK才能编译通过。 完成本篇Codelab需要两台开发板&#xff0c;一台开发板作为游…...

Redis+Lua脚本+SpringAOP实现接口限流

提到限流,常规情况,可以通过spring-cloud-starter-alibaba-sentinel 或者 resilience4j-ratelimiter 组件完成,但是如果不借助现有组件让我们自己开发一套限流工作应该如何应对呢? 本次我们通过Redis + Lua 脚本来实现一个限流组件。 首先创建项目:redis-limit <?xml…...

【wpf应用8】如何让WPF Grid控件根据屏幕尺寸自动调整

简介&#xff1a; 在Windows Presentation Foundation&#xff08;WPF&#xff09;中&#xff0c;Grid控件是一个强大的布局工具&#xff0c;它允许开发者创建复杂且响应迅速的用户界面。在不同的设备和屏幕尺寸上保持良好的布局一致性是一个挑战。本文将介绍如何让Grid控件根据…...

掌握ChatGPT:如何用AI撰写高质量论文

ChatGPT无限次数:点击直达 掌握ChatGPT&#xff1a;如何用AI撰写高质量论文 在当今信息爆炸的时代&#xff0c;人们不仅需要大量信息&#xff0c;还需要这些信息的整理与创新。人工智能技术正是我们在这个信息化时代最强大的助手之一。ChatGPT是一款基于大型神经网络的语言生成…...

平衡隐私与效率,Partisia Blockchain 解锁数字安全新时代

原文&#xff1a;https://cointelegraph.com/news/exploring-multiparty-computations-role-in-the-future-of-blockchain-privacy&#xff1b; https://medium.com/partisia-blockchain/unlocking-tomorrow-outlook-for-mpc-in-2024-and-beyond-cb170e3ec567 编译&#xff1…...

C++中显示与隐式加载dll的使用与区别

一、什么是 DLL&#xff1f;DLL&#xff08;Dynamic Link Library&#xff09; 是 Windows 下的动态链接库&#xff0c;包含可被多个程序共享的函数、资源或类。使用 DLL 可以实现代码复用、模块化设计和插件机制。在 C 中&#xff0c;调用 DLL 中的函数有两种主要方式&#xf…...

酒店门锁V10SDK接口说明-幽冥大陆(一百23)—东方仙盟

相关文件系统环境C# :NET.20,NET3.5,NET4,NET4.5,NET 5.0C:VS2005,VS2012,VS2015操作系统&#xff1a;未来之窗VOSWEB:CHROME43核心代码完整代码using System; using System.Collections.Generic; using System.Text; using System.Collections.Specialized;using System.Windo…...

智慧无人机巡检-无人机可见光红外数据集 无人机多模态检测数据集 红外与可见光检测数据集

智慧无人机巡检-无人机可见光红外数据集&#xff0c;已完成标注&#xff0c;可导出各种常用数据集&#xff0c;yolo&#xff0c;voc&#xff0c;coco等格式。可见光33000张&#xff0c;红外16100张&#xff0c;目标一张一个 无人机可见光红外目标数据集项目详细信息数据集名称无…...

航空航天为什么离不开高强镁合金?国产替代到哪一步了

飞机每减重一千克&#xff0c;全年大约节省四千两百美元的燃油费用——这是航空工程师熟悉的经验值。在商业航空领域&#xff0c;这个数字还只是财务账&#xff1b;在战斗机、导弹和卫星的世界里&#xff0c;减重的收益被换算成更远的航程、更大的载荷、更高的机动性&#xff0…...

半导体元件(二极管/三极管/MOS管/IC)损坏诊断全解

半导体元件&#xff08;二极管、三极管、MOS 管、集成电路&#xff09;是 PCB 的核心功能单元&#xff0c;对过压、过流、ESD、高温极度敏感&#xff0c;损坏后直接导致电路功能失效、短路烧板。很多工程师维修时盲目更换芯片&#xff0c;不仅成本高&#xff0c;还易误判。​一…...

AI学习 - 大模型基础入门

AI学习 - 大模型基础入门 从零开始&#xff1a;Ollama 安装 → 本地模型运行 → Python 代码接入 → 理解核心概念 摘要 本文记录了在 Windows 上使用 Ollama 部署本地大模型、并通过 Python 代码接入调用的完整过程。内容涵盖&#xff1a;Ollama 安装与模型拉取、大模型基础概…...

神经网络与深度学习 第3周课程总结

深度学习视觉应用课程总结 一、常用计算机视觉数据集数据集名称发布方/年份规模图像规格类别数主要用途核心特点MNIST美国国家标准与技术研究院60k训练10k测试2828灰度图10类(0-9手写数字)入门级图像分类最经典的手写数字识别基准数据集Fashion-MNISTZalando(2017)60k训练10k测…...

Airtest Poco实战:5分钟搞定微信小程序自动化测试环境搭建与元素抓取

Airtest Poco实战&#xff1a;5分钟搞定微信小程序自动化测试环境搭建与元素抓取微信小程序作为轻量级应用的代表&#xff0c;已经渗透到电商、社交、工具等各个领域。随着小程序功能的日益复杂&#xff0c;自动化测试成为保障产品质量的重要手段。本文将带你快速搭建微信小程序…...

武汉国电华美串联谐振试验装置,现场用着心里有底

在高压试验现场干了这么多年&#xff0c;这位老师傅常说&#xff0c;一台好的串联谐振装置&#xff0c;就是试验人员的胆。面对GIS、大型变压器、超高压电缆这些大电容试品&#xff0c;没有趁手的谐振设备&#xff0c;交流耐压试验根本没法干。16875kVA/225kV这个规格&#xff…...

DeepSeek模型微调全链路解析:从数据准备、LoRA配置到推理部署的7大关键步骤

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;DeepSeek模型微调全链路概览 DeepSeek系列大语言模型&#xff08;如DeepSeek-V2、DeepSeek-Coder&#xff09;凭借其开源特性、高性能推理能力与丰富的领域适配性&#xff0c;已成为工业界与学术界微调…...