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

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

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

问题

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

解决方案

transform: scale(0.5)(常用)

javascript 复制代码
	#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
javascript 复制代码
	#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>
相关推荐
小磊哥er12 分钟前
【前端工程化】你知道前端编码规范包含哪些内容吗
前端
菌菇汤27 分钟前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
Ramos丶35 分钟前
【ABAP】 从无到有 新建一个Webdynpro程序
java·前端·javascript
qq_411671981 小时前
vue3 的模板引用ref和$parent
前端·javascript·vue.js
清幽竹客2 小时前
vue-37(模拟依赖项进行隔离测试)
前端·vue.js
vvilkim2 小时前
Nuxt.js 页面与布局系统深度解析:构建高效 Vue 应用的关键
前端·javascript·vue.js
滿2 小时前
Vue3 父子组件表单滚动到校验错误的位置实现方法
前端·javascript·vue.js
夏梦春蝉3 小时前
ES6从入门到精通:模块化
前端·ecmascript·es6
拓端研究室4 小时前
视频讲解:门槛效应模型Threshold Effect分析数字金融指数与消费结构数据
前端·算法
工一木子5 小时前
URL时间戳参数深度解析:缓存破坏与前端优化的前世今生
前端·缓存