【前端知识之CSS】怎么让Chrome支持小于12px的文字

前言

本系列主要整理前端面试中需要掌握的知识点。本节介绍怎么让Chrome支持小于12px的文字。

文章目录

  • 前言
  • 一、背景
  • 二、Zoom
  • 三、-webkit-transform:scale()
  • 四、-webkit-text-size-adjust:none


一、背景

Chrome中文版浏览器默认设定页面的最小字号是12px,英文版的没有限制。如果文本需要以更小的字号来显示,就需要编写代码的时候就设置好。
解决的方法包括:

  1. zoom:变焦;
  2. -webkit-transform:scale():放缩;
  3. -webkit-text-size-adjust:none:根据设备(浏览器)来自动调整显示大小。

二、Zoom

zoom可以改变页面上元素的尺寸,属于真实尺寸

<style>
    .span1 {
        font-size: 12px;
        display: inline-block;
        zoom: 0.8;
    }
    .span2 {
        font-size: 12px;
        display: inline-block;
    }
style>
<body>
    <span class="span1">测试10pxspan>
    <span class="span2">测试12pxspan>
body>

在这里插入图片描述

三、-webkit-transform:scale()

-webkit-transform:scale()只对可以定义宽高的元素生效,如果是行内元素的话,应该先转为行内块元素。

<style>
    .span1 {
        font-size: 12px;
        display: inline-block;
        -webkit-transform:scale(0.8);
    }
    .span2 {
        font-size: 12px;
        display: inline-block;
    }
style>
<body>
    <span class="span1">测试10pxspan>
    <span class="span2">测试12pxspan>
body>

在这里插入图片描述

四、-webkit-text-size-adjust:none

用于设定文字大小是否根据设备来自动调整显示大小:

  1. percentage:字体显示的大小;
  2. auto:默认,字体大小会根据设备/浏览器来自动调整;
  3. none:字体大小不会自动调整

存在的问题是:正常来说,当放大网页的时候,一般情况下字体也会随着变大,如果设置了none,那么字体不会随着网页放大而变大了。自从chrome 27之后,就取消了对这个属性的支持。同时,该属性只对英文、数字生效,对中文不生效

你可能感兴趣的:(前端知识之html+CSS,前端,chrome,css)