gli utenti siano in grado di digitare in nome proprio avrete bisogno di un campo di testo. Avrai anche bisogno di un pulsante che attivi una funzione Javascript che controlli il valore del campo di testo e renda le immagini delle lettere.
È possibile utilizzare il seguente codice per creare le lettere. Avrai bisogno di un campo di testo con l'id 'textfield' e un div per rendere i risultati con l'id 'output', che naturalmente puoi cambiare. Mi consiglia di utilizzare un elemento di selezione per memorizzare le opzioni di modello (#patternChooser in questo esempio)
function renderName()
{
// Get the name to be rendered and the chosen pattern
var text = document.getElementById('textfield').value;
var pattern = document.getElementById('patternChooser').value;
// Iterate over the name and create an element for each letter
for(i = 0; i < text.length; i++)
{
var letter = document.createElement('div');
letter.style.backgroundImage = 'url(' + pattern + '_' + text[i] + ')';
document.getElementById('output').appendChild(letter);
}
}
È possibile utilizzare il seguente CSS per applicare un po 'di posizionamento alle lettere (regolare l'altezza con e a quella delle immagini) :
#output div
{
margin-left: 10px;
width: 50px;
height: 100px;
float: left;
}
sarà necessario dare un nome alle immagini come questa: flowerpattern_a.png, brickpattern_j.png, ecc
Se si desidera che le lettere vengano visualizzati in tempo reale è possibile utilizzare onkeyup() di Javascript per sparare una funzione che controlla l'ultimo carattere del valore del campo di testo e crea un elemento per esso.
Sprites
È anche possibile utilizzare uno sprite per aumentare le prestazioni. Metti tutte le immagini per le lettere in un'unica immagine. Imposta questa immagine come sfondo per ogni lettera. Lettura rapida su sprite CSS: http://css-tricks.com/css-sprites/ È possibile aggiungere background-image: url(sprite.png); allo snippet CSS sopra. Invece di limitarsi a impostare un BackgroundImage con Javascript, è necessario impostare la posizione della lettera sfondo (letter.style.background-position = '100px 200px')
Integrazione dei font
Se hai caratteri da usare: ci sono molte opzioni di font embedding come Typeface e Cufon. Quello che trovo più piacevole con cui lavorare è l'uso di font-face. È veloce e il testo si comporterà come qualsiasi altro testo.
Se hai il tuo carattere .TTF Truetype, dovrai convertire il carattere in .EOT per l'uso con Internet Explorer. È anche possibile aggiungere font SVG per la copertura completa del browser. In realtà è molto semplice: basta aggiungere il seguente frammento alla parte superiore del vostro foglio di stile come questo:
@font-face {
font-family: 'GothicCustom';
src: url("LeagueGothic.eot");
src: local('League Gothic'),
url("LeagueGothic.svg#lg") format('svg'),
url("LeagueGothic.otf") format('opentype');
}
Il vantaggio di questa tecnica è che è facile da usare e si ha pieno controllo sul testo reso, come ogni altro testo sul tuo sito web. È possibile impostare la dimensione del carattere, la spaziatura delle lettere ecc. Here's a good read about font-face font embedding. È possibile utilizzare Microsoft WEFT o TTF2EOT per creare caratteri .EOT.
Ad esempio, il codice potrebbe essere simile a questo.
Javascript
function renderName()
{
// Get the name to be rendered and the chosen pattern
var text = document.getElementById('textfield').value;
var pattern = document.getElementById('patternChooser').value;
// Render the text with a class
for(i = 0; i < text.length; i++)
{
var output = document.getElementById('output');
output.style.fontFamily = pattern;
output.innerHTML = text;
}
}
HTML
<form>
<input id="textfield" type="text" />
<select id="patternChooser">
<option>Flowers</option>
<option>Brick</option>
<option>Decorative</option>
</select>
<input type="button" onclick="renderName()" />
</form>
<div id="output"></div>
CSS
@font-face {
font-family: 'Decorative';
src: url("decorative.eot");
src: local('Decorative'),
url("Decorative.svg#lg") format('svg'),
url("Decorative.otf") format('opentype');
}
Ora l'unica cosa che rimane è la conversione dei caratteri e l'importazione nel foglio di stile.
Ovviamente puoi scegliere di utilizzare qualsiasi altro metodo di inclusione di font. Here's an article about font-embedding options ma un veloce Google ti mostrerà anche le opzioni.
È necessario eseguire questa operazione in html puro, poiché l'esempio mostra le immagini generate. –
cosa intendi. . deve solo finire su un sito web, quindi fintanto che la sua dinamica in qualche modo funzionerà, – leora
Flash è un'opzione? perché sono sicuro che ti darebbe i migliori risultati riguardo la tipografia e l'anti-aliasing. – Les