Дело в том что при подрубании(имеется ввиду шрифт которого нет на тачке юзера) шрифта его вес может быть немал, кроме того встречается куча проблем при
font-family:url(..);
Я сам непробывал, да и зачем оно надо то. Ведь те кто говорят (они самые - противники и критики
) что нестандартные шрифты вред для общества (нечетабельны и тд и др) абсолютно правы! Ненужно его использовать в качестве контентного шрифтаА где же его тогда используют - в основном - это заголовки, и действительно зачем грузить целый ШРИФТ юзеру на тачку ради какогото мелкого заголовка - проще сделать пнгшку или гифку и непарится, как все в основном и делают.
Но тут есть минус (минусов может быть и много, но я бы наместе юзера наверно ощутил бы этот один)
Вот приставте есть движок, в нем естественно есть управление заголовком, а дизайнер когда рисовал этот заголовок, подрубил суперпуперизвратнопорно шрифт. Вот. Что обычно делается, в заголовок подрубается картинка и.. все! А заказчег говорит - мне бы там поменять вот заголовок - вы ему ок - открываем фотопоп, чикс и готово, он опять - и опять - жесть какаята! А если заказчег извращенец
и говорит - я вам такие бабки плачу, и немагу поменять этот заголовок!?Все это конечно преувеличениек но есть доля истины
Короче все можно решить простым яваскриптом, смысл таков что только присвоев класс тексту, он автоматом становится картиночным, - недостатки - это то что нельзя пооминять его цвет, ну и еще конечно есть - но для одного дизайно вполне можно юзать, думаю.. )) и то только для мелкого кол-ва теста ибо сдесь без классной подгрузки и браузер при большом кол-ве может висануться
Вот код:
1. как обычно функция инициализации .. млин ну и слово хрен выговариш )
CODE
function init() {
var dir = '...'; // путь к папке где лежат картинки символов
var parent = document.body; // здеся моно указывать с какого объекта по иерархии следует искать класс
var clses = getElementsByClassName('main', parent); // о - класс назавем main
var liters = initFontsArray(); // инициализация масива данных о символах
//там не все но если че - то ведь без проблем добавить моно
// что готово так это все просто - я про порядок, - qwerty ))
for (var i=0; i<clses.length; i++) replaceFonts(dir, liters, clses[i]);
// эта функция и заменяет каждый символ картинкой
}
2. Эту функцию я уже расписал (помойму в предыдущей статье)
CODE
function getElementsByClassName(cls, parent){
var clses = [];
if (parent == undefined) parent = document.body;
var childs = parent.childNodes;
for (var i=0; i<childs.length; i++) {
if (childs[i].className != undefined)
if ((childs[i].className).indexOf(cls)>=0) clses[clses.length] = childs[i];
if (childs[i].childNodes.length > 0) {
var childclses = [];
childclses = getElementsByClassName(cls, childs[i]);
clses = clses.concat(childclses);
}
}
return clses;
}
3. Вот эта функция самая главная, ибо именно она подрубает имг, она не универсальна конечно - но доуверсаливать мне нет необходимости если комуто есть - то плиз выкладывайте абгрейд )), смогу помочь, но не писать за когото
CODE
function replaceFonts(dir, liters, elm) {
var src = dir + 'img_';
var childs = elm.childNodes;
for (var i=0; i<childs.length; i++)
if (childs[i].nodeName == '#text') {
var dv = childs[i].nodeValue;
var tmpspan = document.createElement('SPAN');
for (var ii=0; ii<dv.length; ii++) {
var liter = dv.charAt(ii);
if (liter == ' ') {tmpspan.innerHTML += ' '; continue;}
var img = document.createElement('IMG');
img.src = src + (liters[liter] + 1) + '.gif';
tmpspan.appendChild(img);
}
childs[i].parentNode.replaceChild(tmpspan, childs[i])
}
}
var src = dir + 'img_';
var childs = elm.childNodes;
for (var i=0; i<childs.length; i++)
if (childs[i].nodeName == '#text') {
var dv = childs[i].nodeValue;
var tmpspan = document.createElement('SPAN');
for (var ii=0; ii<dv.length; ii++) {
var liter = dv.charAt(ii);
if (liter == ' ') {tmpspan.innerHTML += ' '; continue;}
var img = document.createElement('IMG');
img.src = src + (liters[liter] + 1) + '.gif';
tmpspan.appendChild(img);
}
childs[i].parentNode.replaceChild(tmpspan, childs[i])
}
}
4. Ну и самая - я бы сказал - нудная функция - Эт вот - объявление картинок:
CODE
function initFontsArray() {
var mas = [];
mas['q'] = 0;
mas['w'] = 1;
mas['e'] = 2;
mas['r'] = 3;
mas['t'] = 4;
...
mas['Ь'] = 123;
mas['Б'] = 124;
mas['Ю'] = 125;
return mas;
}
Проще конечно подрубить файлики в атаче и все наглядно увидеть, да... и насчер рус яз и специальных символов просьба мозг мне не тревожить, ибо это оно и есть, то что я сказал недароботоное ,)
Рус яз там есть конено, ну вот только с кодировкой не все прощитано, вот.
да.. и код который нуна в HTML вставить
CODE
<script language=JavaScript type="text/javascript">
onload = init;
</script>
ЗЫ
ПОСЛЕ СКАЧИВАНИЯ (если таково будет) ПЕРЕИМЕНУЙТЕ html НА RAR и откройте как архив
