😍Tạo ra font in đậm và copy đến website để sử dụng (ok)

Xem thêm mục này đầy đủ hơn: https://github.com/666de6/bold-text-generator

Example 1

index.html

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bold text generator</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Convert to <b>bold</b> text</h1>
  <label for="inputText">Input text:</label>
  <br>
  <textarea id="inputText" placeholder="Wpisz tekst tutaj..."></textarea>
  <br>
  <button onclick="convertText()">Convert</button>
  <div id="result">
    <strong>Result:</strong>
    <div id="boldedText"></div>
  </div>
  <script src="script.js"></script>
</body>
</html>

bold_map.json

{
  "A": "𝗔",
  "B": "𝗕",
  "C": "𝗖",
  "D": "𝗗",
  "E": "𝗘",
  "F": "𝗙",
  "G": "𝗚",
  "H": "𝗛",
  "I": "𝗜",
  "J": "𝗝",
  "K": "𝗞",
  "L": "𝗟",
  "M": "𝗠",
  "N": "𝗡",
  "O": "𝗢",
  "P": "𝗣",
  "Q": "𝗤",
  "R": "𝗥",
  "S": "𝗦",
  "T": "𝗧",
  "U": "𝗨",
  "V": "𝗩",
  "W": "𝗪",
  "X": "𝗫",
  "Y": "𝗬",
  "Z": "𝗭",
  "a": "𝗮",
  "b": "𝗯",
  "c": "𝗰",
  "d": "𝗱",
  "e": "𝗲",
  "f": "𝗳",
  "g": "𝗴",
  "h": "𝗵",
  "i": "𝗶",
  "j": "𝗷",
  "k": "𝗸",
  "l": "𝗹",
  "m": "𝗺",
  "n": "𝗻",
  "o": "𝗼",
  "p": "𝗽",
  "q": "𝗾",
  "r": "𝗿",
  "s": "𝘀",
  "t": "𝘁",
  "u": "𝘂",
  "v": "𝘃",
  "w": "𝘄",
  "x": "𝘅",
  "y": "𝘆",
  "z": "𝘇",
  "ą": "𝗮̨",
  "ć": "𝗰́",
  "ę": "𝗲̨",
  "ł": "𝗹",
  "ń": "𝗻́",
  "ó": "𝗼́",
  "ś": "𝘀́",
  "ź": "𝘇́",
  "ż": "𝘇̇",
  "Ą": "𝗔̨",
  "Ć": "𝗖́",
  "Ę": "𝗘̨",
  "Ł": "𝗟",
  "Ń": "𝗡́",
  "Ó": "𝗢́",
  "Ś": "𝗦́",
  "Ź": "𝗭́",
  "Ż": "𝗭̇"
}

script.js

async function loadBoldMap() {
  const response = await fetch('bold_map.json');
  const boldMap = await response.json();
  return boldMap;
}
async function convertText() {
  const inputText = document.getElementById('inputText').value;
  const boldMap = await loadBoldMap();
  let boldedText = '';
  for (let char of inputText) {
    boldedText += boldMap[char] || char;
  }
  document.getElementById('boldedText').textContent = boldedText;
}

Last updated

Was this helpful?