Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> CSS

Thay đổi kích thước font chữ button với CSS (font-size)

Thuộc tính font-size cho Button

font-size` xác định cỡ chữ hiển thị trên button. Ảnh hưởng trực tiếp đến **kích thước button** (nếu không set width/height cố định) và **độ đọc/khả năng tiếp cận**.

Ví dụ cơ bản

<!DOCTYPE html>
<html>
<head>
  <style>
    .button {
      background-color: yellow;
      color: black;
      text-align: center;
      font-size: 15px;      /* Cỡ chữ 15px */
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h2>Result</h2>
  <p>Click below for result:</p>
  <button class="button">Result</button>
</body>
</html>

Đơn vị font-size phổ biến

Đơn vịMô tảKhuyên dùng
pxTuyệt đối, cố địnhDễ kiểm soát, nhưng không scale với user setting
remTương đối root (html font-size, thường 16px)✅ **Khuyên dùng** - respect user zoom, accessible
emTương đối font-size chaCẩn thận: compound effect khi lồng nhau
%Tương đối font-size chaTương tự em
clamp()Responsive fluid typographyModern: `clamp(1rem, 2vw, 1.5rem)`

Kích thước chuẩn cho Button (Design System)

:root {
  --btn-font-size-sm: 0.875rem;   /* 14px - Small */
  --btn-font-size-md: 1rem;       /* 16px - Default (base) */
  --btn-font-size-lg: 1.125rem;   /* 18px - Large */
}

.btn-sm { font-size: var(--btn-font-size-sm); padding: 6px 12px; }
.btn-md { font-size: var(--btn-font-size-md); padding: 10px 20px; }
.btn-lg { font-size: var(--btn-font-size-lg); padding: 14px 28px; }

Responsive Font Size với clamp()

.btn-responsive {
  /* Min 14px, Preferred 2vw, Max 18px */
  font-size: clamp(0.875rem, 1.5vw, 1.125rem);
  padding: clamp(8px, 1.5vw, 16px) clamp(16px, 3vw, 32px);
}

Button Style Hiện Đại (Đầy đủ)

.btn {
  /* Typography system */
  font-family: inherit;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.02em;
  
  /* Spacing */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  
  /* Visual */
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  
  /* Base size */
  font-size: 1rem; /* 16px - accessible base */
}

Accessibility (WCAG)

  • **Minimum 16px** (1rem) cho body text để tránh zoomforced trên iOS Safari.
  • Button text nên ≥ 14px (0.875rem).
  • Dùng `rem` để tôn trọng cài đặt font-size của user (browser zoom, OS setting).
  • Đảm bảo contrast ratio ≥ 4.5:1 (normal text) / 3:1 (large text ≥ 18.5px bold / 24px).

Lưu ý

Button có `font: inherit` không tự động kế thừa `font-size` từ cha nếu browser reset. Nên set rõ `font-size` trên `.btn` hoặc dùng system font stack.