CSS设置小于12px的字体（ 3种方法 ）

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

虽然在某些浏览器中（如早期版本的Chrome）存在最小字体大小限制，通常会将小于12px的字体强制调整为12px，但仍有一些技巧可以尝试达到小于12px的效果。以下是几种方式的示例代码：

1. 使用相对单位：

   /* 如果父元素字体大小大于12px */
   .small-text {
     font-size: 0.75em; /* 这里假设父元素字体大小为16px，则实际效果字体大小为12px */
   }
   

2. 使用transform缩放：

   .small-text {
     font-size: 12px; /* 先设置至少为12px */
     transform: scale(0.8); /* 然后缩小至80% */
     transform-origin: 0 0; /* 可能需要指定缩放原点以确保准确缩放 */
   }
   

3. 使用-webkit-text-size-adjust（仅限WebKit内核）：

   .small-text {
     -webkit-text-size-adjust: none; /* 关闭WebKit对文本大小的自动调整 */
     font-size: 10px; /* 尝试设置小于12px的字体大小 */
   }
   

请记住，上述方法并非所有情况下都能成功展示小于12px的字体，且过度缩小字体可能会影响其可读性。另外，随着浏览器更新和无障碍标准的提升，这些方法可能不再有效或不推荐使用。在考虑用户体验和可访问性时，请谨慎使用较小的字体大小。