vue+python把woff字体文件中的字体全部读取出来

获取woff字体文件的字符编码

from fontTools.ttLib import TTFont

font = TTFont("7ef51293.woff")
extraNames = font.get('post').__dict__['extraNames']
# 字体文件中全部编码
print(extraNames)

1
2
3
4
5
6
7

fontTools安装
pip install fontTools

通过VUE渲染字体

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体WOFFtitle>
head>
<body>
    <div id="app">
        <div class="fontList">
            <div class="font"  v-for="(font, index) in font_list"  key="{{ index }}">
                <span v-html="handle(font)">span>
                
            div>
        div>
    div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2">script>
    <script>
        var app = new Vue({
            el:"#app",    // 这里挂载到id为app的Dome元素上
            data:{
                // 这个列表是 读取 woff 字体文件的到的编码
                font_list: ['uniee89', 'unif0ac', 'unif684', 'unif2de', 'unie84d', 'unif72e', 'unieb02', 'unif161', 'unif291', 'unif3b9', 'unie5ad', 'unie7a7', 'unif7e7', 'unie173', 'unif56f', 'uniec68', 'unie217', 'unie260', 'unif3b2', 'uniec61', 'unif079', 'unif2ac', 'uniee64', 'uniec51', 'unie34d', 'unie322', 'unif667', 'unied6e', 'unif510', 'unie82f', 'unif257', 'unie12d', 'unie007', 'unie394', 'unie1ca', 'unie36f', 'uniecbd', 'unie1dd', 'unieb86', 'unie644', 'unif3f2', 'unif562', 'unie15b', 'uniec14', 'unie20d', 'unif142', 'unif025', 'unie155', 'unie0a0', 'unie452', 'unif1a8', 'unif8d7', 'unif5fd', 'unif18d', 'unif644', 'unie705', 'unieeb5', 'unied75', 'unif558', 'unie3d4', 'uniecb1', 'unie1c4', 'uniebc3', 'unie447', 'unif6d2', 'unif5ce', 'unif127', 'unif62c', 'unie813', 'unie4b7', 'unie72d', 'unie75c', 'unif31e', 'unie30e', 'unie69d', 'unie0ba', 'unie7aa', 'unie7f3', 'unif6be', 'unieee9', 'unif20c', 'unie227', 'unie85e', 'unie03b', 'unie8ba', 'unif27d', 'unif7bb', 'unief5d', 'unie2d1', 'unie5b5', 'unie9ad', 'unie077', 'uniea15', 'unif1e3', 'uniea1e', 'unie633', 'unif780', 'unif0c3', 'unif0de', 'unie144', 'unif63d', 'unie7fc', 'unie350', 'unie754', 'unieb19', 'unif78d', 'unif516', 'unif893', 'unieff2', 'unif7a5', 'uniebdb', 'unie64b', 'unif83a', 'unif7ee', 'unie065', 'unie2c3', 'unif0e1', 'unie652', 'unie357', 'unif4b7', 'unieffc', 'uniee2f', 'unif3a2', 'unie835', 'unif642', 'uniebf8', 'unie980', 'unie0df', 'unif69d', 'unif888', 'unied89', 'unie958', 'unief5f', 'uniee5e', 'unieba9', 'unie011', 'unie3d8', 'unie127', 'unie620', 'unif7e6', 'unif492', 'unie42e', 'unieb87', 'unief8a', 'unie740', 'unif4d1', 'unie51d', 'unif6d6', 'unif3c7', 'unieab1', 'unie0de', 'unif4e2', 'unif6f0', 'unieed4', 'unie390', 'unie5af', 'unie017', 'unie541', 'unif15c', 'unied71', 'unie2df', 'unie397', 'unief61', 'unif2dd', 'uniecc9', 'unie135', 'unif61a', 'unied3a', 'unie79a', 'unie474', 'unie88b', 'unif2af', 'unif1bf', 'uniebe7', 'unie1b6', 'unif092', 'uniebed', 'uniec00', 'unif085', 'unie184', 'unie718', 'uniea60', 'unif632', 'unif2b1', 'unie399', 'unie44a', 'unie222', 'unieec6', 'uniecdb', 'uniea31', 'unie0a5', 'unif14d', 'unie7bb', 'unif3fb', 'unie9d8', 'uniea09', 'unif011', 'unie048', 'unief16', 'unif8b4', 'unif4f6', 'unie3c8', 'unie621', 'unif1b2', 'unif52f', 'unif362', 'unieb5b', 'unie2fd', 'unif5d2', 'unie200', 'uniebfd', 'unif622', 'unif0c9', 'unif060', 'unif2c1', 'unif62d', 'unie8d7', 'unie188', 'unie6db', 'unif59a', 'unif0db', 'unie2a0', 'unie090', 'unif278', 'unief9a', 'unieeb0', 'unif01d', 'unif6ca', 'unie0f3', 'unif00d', 'unif3ed', 'unif87e', 'unie256', 'unif54d', 'unif12a', 'unif747', 'unif663', 'uniecbc', 'unie3cc', 'unif204', 'unif555', 'unif0ee', 'unif1f1', 'unif2e7', 'unie60e', 'unied07', 'unie2c0', 'unif7ea', 'uniee20', 'unif288', 'unif1e2', 'unie672', 'unie71a', 'uniee43', 'unif111', 'unif699', 'unif01e', 'uniedc8', 'unie509', 'unif04b', 'unif36c', 'unif3f5', 'uniec3f', 'unie2e6', 'unie0c0', 'unif78f', 'unif035', 'unif857', 'unif448', 'unie8c9', 'unif717', 'unie602', 'unif2bb', 'unie40c', 'unif5bb', 'unif002', 'uniee9a', 'unif30a', 'unif0ec', 'unif1e0', 'uniea5f', 'unif758', 'unif2f3', 'unie752', 'unif4a8', 'unif0f1', 'unie9e2', 'unie85b', 'unie773', 'unif8c2', 'unie247', 'unie9aa', 'unie176', 'unie82e', 'unie649', 'unie079', 'unie060', 'unie0fc', 'uniede3', 'unif863', 'unie502', 'unif3c5', 'unif06a', 'unie040', 'unif413', 'unieb36', 'unif899', 'unie7dc', 'uniea0a', 'unif790', 'unif21c', 'unie1f3', 'unieea5', 'unie269', 'unie4f4', 'unif0bc', 'unif672', 'uniedc6', 'uniea68', 'unie36c', 'unif224', 'unif7b1', 'uniec64', 'unieceb', 'uniec23', 'unie596', 'unie3e0', 'unie79b', 'unieb1c', 'unie043', 'unied47', 'uniecd0', 'unif04c', 'unif8fe', 'unief30', 'unieddc', 'unie7e5', 'unif637', 'unie9e0', 'unied2e', 'unie850', 'unieef3', 'unie098', 'unif0cf', 'uniea8f', 'unif5e5', 'unif527', 'unie159', 'unif56e', 'unif4af', 'unie19c', 'unif73f', 'unie8ac', 'unie783', 'unie361', 'unif3b0', 'unie72c', 'unie471', 'unie138', 'unif462', 'unif1bd', 'unie267', 'unie5f1', 'unif2e6', 'unif67c', 'unif2ba', 'unif54e', 'unied18', 'unie41a', 'uniec66', 'unif0d9', 'unie5d1', 'unif8bf', 'uniecd2', 'unie09a', 'unie4ee', 'unif2ee', 'uniebc8', 'unied77', 'unie722', 'unif8f9', 'unie7c8', 'unie46d', 'uniee15', 'unie6a6', 'unie37a', 'unie654', 'unie49b', 'unieb0c', 'unif294', 'unif3a5', 'unie0d2', 'uniea25', 'unieaa2', 'uniec33', 'unieaa5', 'unif1b6', 'unif3bf', 'unie3b9', 'unif02f', 'unie700', 'unie3da', 'unie480', 'uniecab', 'unif710', 'uniea84', 'unie94f', 'unif379', 'unief1c', 'unie766', 'unif2b4', 'unie099', 'unie0aa', 'unie96f', 'unie411', 'unie186', 'unie235', 'unie2ca', 'unie62d', 'uniee1c', 'unie662', 'unie99d', 'unif281', 'unif32f', 'unie8d4', 'unif1f6', 'unie642', 'unif3ec', 'unie4bb', 'unie54f', 'unie66d', 'unif5be', 'unie964', 'unif640', 'unie636', 'unif407', 'unie871', 'unie7cd', 'unieeff', 'unif253', 'unie9df', 'unif853', 'unif0e6', 'unif0ca', 'unief1a', 'unif6e1', 'unie2bd', 'unif7dd', 'unie18d', 'unif357', 'unif359', 'unif043', 'uniec24', 'unie9dc', 'unie952', 'unif71b', 'unif052', 'unie015', 'unif6ba', 'unieab9', 'unif6cf', 'unif18b', 'unif858', 'unif724', 'unie982', 'unif7ba', 'unif459', 'unif54f', 'unif2b0', 'unieecb', 'unif700', 'unie9ce', 'unieafc', 'uniee3a', 'unif3a0', 'unif31c', 'unif40d', 'unieb59', 'unieb51', 'unie193', 'unie87a', 'uniea06', 'unied2c', 'unif61c', 'unif585', 'unif7ca', 'unief25', 'unif5ff', 'unif4c0', 'unif57a', 'unif489', 'unieace', 'unif6e6', 'unie283', 'unif054', 'unie43f', 'uniee8c', 'unif2eb', 'unie523', 'unied86', 'unied49', 'uniedc5', 'unie395', 'unieab3', 'unif1b0', 'unif749', 'unif8ba', 'unie63c', 'unie12e', 'unie21f', 'unieb70', 'unied12', 'unie9a1', 'uniebb7', 'unie778', 'unie87d', 'unie800', 'unif602', 'uniee72', 'uniecb7', 'uniedd2', 'unif67f', 'uniee23', 'unie571', 'unie061', 'unif48d', 'unif310', 'unif722', 'unif867', 'unif09d', 'unieac0', 'unif336', 'unie2b0', 'uniefa8', 'unie7d4', 'unif3e0', 'unie133', 'unie61b', 'unie905', 'unif377', 'unie81f', 'uniec0a', 'unie3a0', 'uniee2a', 'unie9d6', 'unie846', 'unie8bb', 'unie3c3', 'unif40f', 'unif706', 'unie4e9', 'unie59e', 'unif347', 'unif2fd', 'unif02d', 'unied6c', 'unie53f', 'unif175', 'unie59d', 'unie3ef', 'unie5a4', 'unif592', 'unif69f', 'unie15c', 'unif4a1', 'unif8ce', 'unie720', 'unif50c', 'unie5b6', 'unie30f', 'unie56b', 'unif76a', 'unif069', 'unif8f1', 'unif014', 'unie5c4', 'uniee24', 'unieb5e', 'unif578', 'uniebc0', 'unif87c', 'uniea6f', 'unif440', 'unie4d5', 'unif8d0', 'unif4b4', 'unie9cb', 'unie9ba', 'unif319', 'unif4a5', 'unif137', 'unie29b', 'unie46e', 'unie8c3', 'unie5a0', 'unie7a9', 'unied04', 'unie5c7', 'unif233', 'unif321', 'uniec45']
            },
            methods: {
                handle: function(text){
                    return text.replace("uni","&#x") + ";" 
                }
            }
        })
    script>
    <style> 
        @font-face {
           font-family: myFirstFont;
           src: url(css/7ef51293.woff);
        }
        
        @font-face {
           font-family: myFirstFont;
           src: url(css/7ef51293.woff);
           font-weight: bold;
        }
        
        * {
           font-family: myFirstFont;
           font-size: 80px;
        }
        div.font {
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            border: 1px solid #2b2b2c;
            display: inline-block; 
            margin: 10px;
            padding: 10px;
        }
        style>
body>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

效果

相关阅读:
Set集合（超详解)
SSM框架学习
 Java并发编程的艺术总结（1）
本地搭建php包依赖管理工具，使用satis搭建私有composer仓库
 不允许你还不了解指针的那些事（二）（从入门到精通看这一篇就够了）（数组传参的本质+冒泡排序+数组指针+指针数组）
item_review-获得商品评论
 连接池优化
 springboot系列(二十):如何通过redis实现手机号验证码功能 |超级详细，建议收藏
 女孩起名字：诗经中惊艳的女孩名字
 Java项目：SSM演唱会售票管理系统
原文地址：https://blog.csdn.net/lxb_wyf/article/details/126487872