Cách thêm nút tùy chỉnh font và font size vào website của bạn

Đang lướt Facebook, có bạn đã thắc mắc làm thế nào để thêm tính năng tùy chỉnh font chữ và kích thước chữ cho nội dung? Và trong bài viết này, mình sẽ hướng dẫn cách thêm chức năng một cách đơn giản và hiệu quả!

Demo

Tùy chỉnh

Hiển thị button "Tùy chỉnh" và form tùy chỉnh font

Sử dụng đoạn code bên dưới để hiển thị chức năng tùy chỉnh

  <div id="customizationForm">
    <span class="closeButton" id="closeButton">&times;</span>
    <label for="fontSelect">Font:</label>
    <select id="fontSelect">
      <option value="Arial">Arial</option>
      <option value="Times New Roman">Times New Roman</option>
      <!-- Thêm các tùy chọn font khác nếu muốn -->
    </select>
    <label for="fontSizeSelect">Font size:</label>
    <select id="fontSizeSelect">
      <option value="12px">12px</option>
      <option value="16px">16px</option>
      <option value="20px">20px</option>
      <option value="24px">24px</option>
      <!-- Thêm các tùy chọn font size khác nếu muốn -->
    </select>
    <button id="setDefaultButton">Đặt về mặc định</button>
  </div>

Giao diện cho chức năng tùy chỉnh font

Cái này mình chỉ làm cơ bản thôi, các bạn tự ý tùy chỉnh sao cho hợp với website của mình

<style>
    .titlecustom{
    font-size: 20px;
    width: 100%;
    text-align: center;
    font-weight: bold;
    padding: 10px 0;
    }
    #customizationForm {
    display: none;
    position: absolute;
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #f9f9f9;
    padding: 20px;
    border: 1px solid #ccc;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    z-index: 999;
    width: 300px;
    }

    #customizeButton {
      background-color: #4CAF50;
      color: white;
      border: none;
      padding: 10px 20px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      margin-bottom: 10px;
      cursor: pointer;
    }

    #closeButton {
    float: right;
    cursor: pointer;
    font-size: 15px;
    color: white;
    background-color: #f44336;
    padding: 2px 8px;
    border-radius: 50%;
    margin-top: -15px;
    margin-right: -15px;
    }

    #closeButton:hover {
      background-color: #d32f2f;
    }

    #abc {
      margin-top: 30px;
    }

    label {
      display: block;
      margin-bottom: 5px;
    }

    select, button {
      padding: 5px;
      font-size: 16px;
      margin-bottom: 10px;
    }

    button {
      background-color: #008CBA;
      color: white;
      border: none;
      cursor: pointer;
    }
  </style>

Thêm Script để chức năng hoạt động

<script>
    document.addEventListener("DOMContentLoaded", function () {
      const fontSelect = document.getElementById("fontSelect");
      const fontSizeSelect = document.getElementById("fontSizeSelect");
      const setDefaultButton = document.getElementById("setDefaultButton");
      const customizeButton = document.getElementById("customizeButton");
      const customizationForm = document.getElementById("customizationForm");
      const closeButton = document.getElementById("closeButton");
      const abcElement = document.getElementById("customfont");

      function showForm() {
        customizationForm.style.display = "block";
      }

      function hideForm() {
        customizationForm.style.display = "none";
      }

      // Kiểm tra và khôi phục trạng thái lưu trữ khi tải lại trang
      if (localStorage.getItem("selectedFont")) {
        fontSelect.value = localStorage.getItem("selectedFont");
        abcElement.style.fontFamily = fontSelect.value;
      }

      if (localStorage.getItem("selectedFontSize")) {
        fontSizeSelect.value = localStorage.getItem("selectedFontSize");
        abcElement.style.fontSize = fontSizeSelect.value;
      }

      // Hiển thị form khi click vào nút tùy chỉnh
      customizeButton.addEventListener("click", showForm);

      // Ẩn form khi click vào nút "đóng"
      closeButton.addEventListener("click", hideForm);

      // Xử lý khi chọn font
      fontSelect.addEventListener("change", function () {
        const selectedFont = fontSelect.value;
        abcElement.style.fontFamily = selectedFont;
        localStorage.setItem("selectedFont", selectedFont);
      });

      // Xử lý khi chọn font size
      fontSizeSelect.addEventListener("change", function () {
        const selectedFontSize = fontSizeSelect.value;
        abcElement.style.fontSize = selectedFontSize;
        localStorage.setItem("selectedFontSize", selectedFontSize);
      });

      // Xử lý khi click vào nút đặt về mặc định
      setDefaultButton.addEventListener("click", function () {
        fontSelect.value = "Arial"; // Chọn font mặc định là Arial
        fontSizeSelect.value = "16px"; // Chọn font size mặc định là 16px
        abcElement.style.fontFamily = "Arial";
        abcElement.style.fontSize = "16px";
        localStorage.removeItem("selectedFont");
        localStorage.removeItem("selectedFontSize");
      });
    });
  </script>

Lưu ý rằng trạng thái font và font size được lưu trong LocalStorage của trình duyệt, giúp giữ lại cài đặt khi người dùng quay lại trang web sau này.

Áp dụng font chữ cho nội dung sau khi tùy chỉnh

Như ở đoạn Script bên trên sẽ áp dụng cho toàn bộ nội dung nằm trong có id "customfont"
Vậy nên muốn áp dụng bạn phải thêm id "customfont", ví dụ:

<div id="customfont">
    <p>
      Đây là nội dung sẽ áp dụng font và font size khi tùy chỉnh.
    </p>
  </div>

Và đó là tất cả những bước giúp bạn thêm nút tùy chỉnh font và font size vào website của bạn, có thắc mắc gì hãy để lại bình luận dưới bài viết này. Thank! ./.