Решение для минимального размера шрифта в браузере Chrome

внешний интерфейс Chrome

задний план

Чтобы улучшить взаимодействие с пользователем, Chrome устанавливает для браузера минимальный размер шрифта по умолчанию (мин. пиксели) в соответствии с разрешением компьютера и другими условиями. Шрифты меньшего размера по-прежнему будут отображаться в пикселях мин.

Проверьте минимальный размер шрифта браузера Chrome.

Браузер-->Настройки-->Дополнительные настройки-->Внешний вид-->Настроить шрифты-->Минимальный размер шрифта

Мой минимальный размер шрифта здесь составляет 10 пикселей, поэтому шрифт размером 5 пикселей все равно будет отображаться в моем браузере как 10 пикселей.

решение

<div class="small-name">
    用户名
</div>

css часть

.small-name {
    font-size: 5px;
}

Измените часть css на

.small-name {
    -webkit-transform-origin-x: 0;
    transform-origin-x: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    font-size: 10px;
}

В настоящее время все браузеры Chrome будут отображаться в соответствии с половиной 10 пикселей, что составляет 5 пикселей.

небольшая проблема

После решения приведенного выше решения вы обнаружите, что всеdivУменьшаются вдвое, как сделать только шрифт уменьшенным?

.small-name {
    width: 200%;
    -webkit-transform-origin-x: 0;
    transform-origin-x: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    font-size: 10px;
}

Установите ширину в два раза больше исходного размера, и все готово~

Категории