Police
demo.woff2
Sortie
@font-face { src: url(data:font/woff2;base64,...) }Outils de design
Encodeur de polices Base64 — Générateur @font-face
Encodez un fichier de police en Base64 dans le navigateur et générez un extrait @font-face intégrable. Utile pour les démos, les modèles d'e-mail et les pages autonomes qui incorporent temporairement une police. Les fichiers restent locaux.
PoliceBase64CSS
Ajouter cet outil aux favoris
Aucun mode de stockage des favoris n’a été sélectionné.
Actions rapides
Copiez l’URL de cet outil ou ouvrez la feuille de partage du système sur un appareil compatible.
设计配色
Encodeur de polices Base64
Encodez un fichier de police en Base64 dans le navigateur et générez un extrait @font-face intégrable. Utile pour les démos, les modèles d'e-mail et les pages autonomes qui incorporent temporairement une police. Les fichiers restent locaux.
拖放字体文件至此处
支持 TTF / OTF / WOFF / WOFF2
请先上传字体文件
@font-face Data URI
实时预览
Cas d’usage
- Créer une page de démonstration à fichier unique
- Incorporer temporairement une police actif
- Vérifiez la taille de la charge utile de la police encodée
Mode d’emploi
- Choisissez un fichier de police
- Entrez le nom de la famille de police
- Copiez le CSS @font-face généré
Exemples d’entrée et de sortie
FAQ
Est-ce adapté à la production ?
Les grandes polices en ligne gonflent beaucoup le CSS. La production préfère généralement les fichiers de polices séparés avec mise en cache.
La police est-elle envoyée à un serveur ?
Non. La lecture et l'encodage Base64 s'effectuent localement dans le navigateur.
Outils
Outils associés
Poursuivez avec un autre outil traduit pour une tâche proche.
Encodage/Décodage Base64
Encodeur et décodeur Base64
Encodez et décodez Base64 dans le navigateur, avec des variantes standard et sécurisées pour les URL, une détection automatique de la direction et une conversion facultative de fichier en Base64. Utile pour le débogage de l'API et la préparation des données locales.
Base64 Encodage Développeur
CSS vers Tailwind
CSS vers Tailwind – Mappeur de déclaration
Collez les déclarations CSS et mappez-les aux classes d'utilitaires Tailwind lorsque cela est possible. Les règles communes de disposition, d'espacement et de couleur deviennent des classes standard ; les valeurs sans correspondance reviennent à une syntaxe de valeurs arbitraires.
CSS Tailwind Conversion