Como visualizar todos os caracteres de uma fonte e seu mapeamento de letras

1

Então eu tenho essa fonte de ícone como .eot, .svg, .ttf e .woff para uso em uma página da web.

Por exemplo, na minha página da web eu escreveria <i>t</i> e atribuiria <i> a fonte do ícone. Na fonte do ícone, a letra t é o ícone que quero exibir aqui.

Mas não há informações de quais caracteres realmente representam quais ícones.

Então, pergunto-me como é que, se existe uma forma, ou talvez algum software, permitir-me ver todos os caracteres, juntamente com a letra a que estão mapeados.

    
por Benjamin Moser 13.08.2015 / 16:54

1 resposta

0

Ok, eu encontrei um aplicativo - é um aplicativo da web baseado no Django, Glyphviewer ( link ). Isto é o que eu fiz no Ubuntu 14.04 para instalá-lo localmente - note que o aplicativo em sua versão atual é adaptado para um CMS chamado Mezzanine, que não instalarei aqui, então é por isso que a instalação é um pouco mais complicada.

Primeiro, você precisa disso (estou usando o Python 2.7 aqui):

sudo apt-get install python-numpy     # (for python 3, python3-numpy)
sudo apt-get install python-pip       # (for python 3, python3-pip)

Em seguida, instale estas dependências:

git clone https://github.com/behdad/fonttools.git ;
cd fonttools ;
sudo python2 setup.py install ;
# ... log ends with: Finished processing dependencies for fonttools==3.0
cd ..

git clone https://github.com/typesupply/woffTools.git
cd woffTools
sudo python2 setup.py install
# ... log ends with: Writing /usr/local/lib/python2.7/dist-packages/woffTools-0.1beta.egg-info
cd ..

Em seguida, instale o glyphviewer em si:

sudo pip install glyphviewer
# goes to /usr/local/lib/python2.7/dist-packages/glyphviewer; also downloads+installs Django>=1.0
# ... log ends with: Successfully installed glyphviewer Django; Cleaning up...

Agora, crie seu aplicativo local:

cd /tmp
django-admin startproject myglyphviewer
cd myglyphviewer/

# "The next stage is to add "glyphviewer" to your INSTALLED_APPS list in settings.py"
python -c "import re; f=open('myglyphviewer/settings.py','r'); fs=f.read(); print re.sub('(INSTALLED_APPS = \(.*?)\)',r\"    'glyphviewer',\n)\",fs,flags=re.DOTALL)" > tmpset
mv tmpset myglyphviewer/settings.py

Neste ponto, "... adicione o URL desejado em um dos arquivos urls.py."; então tenha isso no seu arquivo myglyphviewer/urls.py :

from django.conf.urls import include, url
from django.contrib import admin
#from . import settings
import sys, os
sys.path.append( os.path.dirname(os.path.realpath(__file__)) ) 
#sys.path.append( "/usr/local/lib/python2.7/dist-pac^Cges/django/contrib/admin/templates/admin" ) # base.html - via symlink 
import glyphviewer
from glyphviewer import views

urlpatterns = [
    url(r'^admin/', include(admin.site.urls)),
    url(r'^glyphviewer/$', views.index, name="index"),
    url(r'^glyphviewer/doc/$', views.doc, name="doc"),
]

Vamos usar o admin base.html do Django, então faça isso:

sudo cp \
/usr/local/lib/python2.7/dist-packages/django/contrib/admin/templates/admin/base.html \
/usr/local/lib/python2.7/dist-packages/django/contrib/admin/templates/base.html

EDIT: devemos copiar aqui, em vez de apenas symlink, porque depois da cópia, devemos editar o base.html copiado e inserir:

{% block extra_css %}{% endblock %}

... em algum lugar da cabeça; isso vem do mezzanine / base.html , e sem ele, a fonte não será aplicada na página!

Em seguida, altere esses arquivos de modelo para que eles se refiram a "bloquear conteúdo" em vez de "bloquear principal":

/usr/local/lib/python2.7/dist-packages/glyphviewer/templates/glyphviewer/doc.html :

{% block content %} <!--block main -->

/usr/local/lib/python2.7/dist-packages/glyphviewer/templates/glyphviewer/index.html :

{% block content %} <!-- block main -->

Agora,

# "The final stage is to populate the directory with fonts where you display your chosen font or fonts"
echo "STATIC_ROOT = '/tmp/myglyphviewer/static'" >> myglyphviewer/settings.py
python manage.py collectstatic

Agora, em princípio, poderemos executar o servidor, mas se ele falhar com " Você tem migrações não aplicadas, seu aplicativo pode não funcionar corretamente até que elas sejam aplicadas. " e execute:

python manage.py migrate

E finalmente podemos executar o servidor (novamente, tudo isso é feito no diretório /tmp/myglyphviewer ):

python manage.py runserver

Se tudo correr bem, você poderá apontar o seu navegador para o link - e o aplicativo será exibido. Então, para as fontes dentro de seu STATIC_ROOT, você terá uma lista suspensa; lá você pode escolher a fonte, então marque "Mostra os caracteres na fonte", e clique em "Enviar" - e depois de um tempo, você deve pegar a tabela com os caracteres; na minha caixa, parece assim:

Corteiatabeladacapturadetela,poiselaémuitolonga,masmostraosuficienteparaqueoaplicativo,comoprocessodeinstalaçãodescrito,estejafuncionando.

EDIT:sevocêquiserinspecionarsuasprópriasfontes.woff,parecequevocêprecisacopiá-lasparaodiretório"site" local (aqui, /tmp/myglyphviewer/static/glyphviewer/fonts/ ) e o diretório de instalação ( /usr/local/lib/python2.7/dist-packages/glyphviewer/static/glyphviewer/fonts/ ) - caso contrário, o sistema pode retornar 404 ao acessar o link ...

Caso contrário, se você não se importa com a rede local, também pode usar o link link , para gerar as tabelas de glifos de fonte lá (mas somente para fontes localmente presentes lá, ou presentes em algum lugar na rede onde elas possam ser carregadas).

    
por 23.11.2015 / 17:45