Home Web Front-end H5 Tutorial Google Chrome small font processing solution, that is, fonts below 12px_html5 tutorial skills

Google Chrome small font processing solution, that is, fonts below 12px_html5 tutorial skills

May 16, 2016 pm 03:48 PM
small font Google Chrome

Google Chrome does not support small fonts below 12px, maybe because of user experience.
There are also some articles on the Internet saying that it can be used:

Copy the code
The code is as follows:

-webkit-text-size-adjust:none;

However, since chrome 27, support for this attribute has been removed.

Do we have any other ways to solve this problem?

Google Chrome supports CSS scaling, so we can make a fuss about this:

Copy code
The code is as follows:

-webkit-transform: scale(0.5);

Since the minimum support is 12px, then scale based on 12px,

At the same time, you can use -webkit-transform-origin-x: 0; to solve the displacement problem of margin-left after scaling:

Copy code
The code is as follows:

.test_tag{
font-size:12px;
-webkit-transform-origin-x: 0;
- webkit-transform: scale(0.5833333333333334);
}

The scale value is calculated as: 7 / 12 = 0.5833333333333334
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Recommended Android emulator that is smoother (choose the Android emulator you want to use) Recommended Android emulator that is smoother (choose the Android emulator you want to use) Apr 21, 2024 pm 06:01 PM

Recommended Android emulator that is smoother (choose the Android emulator you want to use)

How to add trusted sites in Google Chrome How to add trusted sites in Google Chrome Jul 19, 2024 pm 04:14 PM

How to add trusted sites in Google Chrome

Why can't I download Google Chrome in Windows 7? Why can't I download Google Chrome in Windows 7? Apr 13, 2024 pm 11:00 PM

Why can't I download Google Chrome in Windows 7?

What should I do if Google Chrome prompts for unsafe content? Google Chrome shows unsafe solution What should I do if Google Chrome prompts for unsafe content? Google Chrome shows unsafe solution Apr 17, 2024 pm 08:00 PM

What should I do if Google Chrome prompts for unsafe content? Google Chrome shows unsafe solution

How to install Doubao browser plug-in version - Doubao browser plug-in installation method How to install Doubao browser plug-in version - Doubao browser plug-in installation method May 07, 2024 pm 07:16 PM

How to install Doubao browser plug-in version - Doubao browser plug-in installation method

What is the middle mouse button? What is the use of pressing the middle mouse button? What is the middle mouse button? What is the use of pressing the middle mouse button? May 09, 2024 pm 12:40 PM

What is the middle mouse button? What is the use of pressing the middle mouse button?

How to screenshot the entire content of a web page in Chrome? How to screenshot the entire web page in Google Chrome How to screenshot the entire content of a web page in Chrome? How to screenshot the entire web page in Google Chrome May 08, 2024 am 08:50 AM

How to screenshot the entire content of a web page in Chrome? How to screenshot the entire web page in Google Chrome

Why can't I access gate.io? Why can't I access gate.io? Apr 24, 2024 pm 02:25 PM

Why can't I access gate.io?

See all articles