如何在 HTML 或 CSS 中使用 Base64 字串？

HTML 和 CSS 檔案均支援使用 Base64 資料字串。複製下方程式碼，將「YOUR_BASE64_STRING」替換為自己的 Base64 字串。

在 HTML 中使用 Base64

• JPEG: <img src="data:image/jpeg;base64,YOUR_BASE64_STRING"/>
• PNG: <img src="data:image/png;base64,YOUR_BASE64_STRING"/>
• GIF: <img src="data:image/gif;base64,YOUR_BASE64_STRING"/>
• SVG: <img src="data:image/svg+xml;base64,YOUR_BASE64_STRING"/>
• JAVASCRIPTS: <script type="text/javascript" src="data:text/javascript;base64,YOUR_BASE64_STRING"></script>
• CSS: <link rel="stylesheet" type="text/css" href="data:text/css;base64,YOUR_BASE64_STRING"/>

在 CSS 中使用 Base64

• 影像: .yourclass {background: url('data:image/jpeg;base64,YOUR_BASE64_STRING');}
• 字型:

  @font-face {
      font-family: 'yourfontname';
      src: local("yourfontname"),
          url(data:font/opentype;charset=utf-8;base64,YOUR_BASE64_STRING),
          url(data:application/font-woff;charset=utf-8;base64,YOUR_BASE64_STRING) format(woff),
          url(data:application/font-woff2;charset=utf-8;base64,YOUR_BASE64_STRING) format(woff2),
          url(data:application/font-ttf;charset=utf-8;base64,YOUR_BASE64_STRING) format('truetype');
  }
  

  (or $keyC)

Base64 解碼/Base64 編碼