如何設定12px以下的文字，以及文字縮放後位置偏移的問題
阿新 • • 發佈：2021-01-03
用scale來控制文字縮放時，會出現位置偏移的問題，如下圖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
font-size: 12px;
}
.small{
transform 原因是transform屬性有一個形變中心點的東西：transform-origin
- 格式：transform-origin: x y
- x：水平方向
- y：垂直方向
- 取值：畫素/百分比/關鍵字（left、rihgt、top、bottom、center）
- 預設以自己的中心點作為參考來旋轉
當以自己中心進行縮放時，就好比一張紙，把它揉成一個紙球，兩邊會出現一些空間
改變形變中心點即可解決偏移問題
<style>
p{
font-size: 12px;
}
.small{
transform: scale(0.5);
transform-origin: left;
}
</style>
