Aller au contenu
Retour au blog

Utiliser des chaînes Base64 dans HTML ou CSS

Leibniz Li

@leibnizli
+

Les fichiers HTML et CSS prennent en charge les chaînes de données Base64. Copiez les exemples ci-dessous et remplacez « YOUR_BASE64_STRING » par votre propre chaîne Base64.

Utiliser Base64 dans HTML

  • 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"/>

Utiliser Base64 dans CSS

  • IMAGES: .yourclass {background: url('data:image/jpeg;base64,YOUR_BASE64_STRING');}
  • POLICES:
    @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');
}

Décodage Base64/encodage Base64