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

【CSS】css如何实现字体大小小于12px?

【CSS】css如何实现字体大小小于12px?

  • 问题
  • 解决方案
    • transform: scale(0.5)(常用)
    • SVG 矢量图设置text

问题

文字需要显示为12px,但是小于12px的,浏览器是显示不来的

解决方案

transform: scale(0.5)(常用)

	#box {
		font-size: 12px;
	}
	#box div {
		transform: scale(0.5);
		/* 	transform-origin属性表示在对元素进行变换的时候,设置围绕哪个点进行变化的。默认情况,变换的
		原点在元素的中心点,即是元素X轴和Y轴的50%处 */
		transform-origin: 0% 100%;
		 // 解决兼容性问题
	    -webkit-transform: scale(0.5);
	    -webkit-transform-origin: 100% 100%;
	}

	<div id="box">
		<div>
			字体大小小于12px
		</div> 字体大小为12px
	</div>

在这里插入图片描述

SVG 矢量图设置text

  • x表示文字左对齐位置,一般都为0,y表示字体大小,注意,修改字体颜色是设置fill
	#box {
		font-size: 12px;
	}
	svg {
		width: 100px;
		/*  需要根据实际情况调整 */
		height: 100px;
		/* 需要根据实际情况调整 */
		background-color: red;
	}
	<div id="box">
		<svg>
			<text x="0" y="10"  fill='pink'>我是10px字体大小 hello world!</text>>
		</svg>
		字体大小为12px
	</div>

在这里插入图片描述


http://www.kler.cn/a/230908.html

相关文章:

  • android 设置未知来源等 AppOpsManager 权限的设置接口
  • 算法——前缀和算法
  • <设计模式>单例模式懒汉和饿汉
  • ​​​​​​​CleanMyMac X有什么优势?到底好不好用?
  • Linux下库函数、静态库与动态库
  • 1Panel面板如何安装并结合内网穿透实现远程访问本地管理界面
  • Python编程:17个提升工作效率的自动化脚本
  • 物流|基于Springboot的物流管理系统设计与实现(源码+数据库+文档)
  • docker 入门教程之概述
  • 位运算:进制
  • dolphinscheduler海豚调度(一)简介快速体验
  • 基于51 单片机的交通灯系统 源码+仿真+ppt
  • 改变AI服务器:探索界面互连芯片技术的创新突破
  • yolov8使用旋转框自己做数据集检测
  • python 多趟算法举例
  • MySQL:从基础到实践(简单操作实例)
  • MySQL学习记录——사 表结构的操作
  • C++俄罗斯方块 -- 菜单展示和选择 -- 方法
  • 前端代码评审规范
  • 关于自动驾驶概念的学习和一些理解