У меня сайт с дополнениями к photoshop, среди них имеются шрифты. Хочу добавить возможность вводить любой текст и смотреть, как он будет выглядеть. Вот пример такого сервиса: http://ru.fontriver.com/font/edmundsbury_serif (там есть вкладка Тест-драйв, в которой мы можем ввести любой текст и увидеть, как он выглядит с данным шрифтом). Загуглил и ничего не нашел ( Подскажите, это просто скрипт или что-то более глобальное? можно ли поставить такой сервис на сайт бесплатно и т.д.?
это подгрузка данного шрифта и его вывод, можно сделать на css а можно сделать графически на сервере и аяксом отдать... любой метод имеет право на жизнь
Я сделал следующее: Нашел одну вещь, typeface называется. Что-то вроде cufon. Все было хорошо, пока дело не дошло до изменения текста в поле. Вот здесь результат работы: http://digmast.ru/new-fontz/new-giger Всё классно, если не менять текст в поле А это главный момент в задаче. Вот основной код: HTML: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="js/typeface-0.15.js"></script> </head> <body> <script type="text/javascript"> function changeText2(){ var userInput = document.getElementById('userInput').value; document.getElementById('boldStuff2').innerHTML = userInput; } </script> <script type="text/javascript" src="js/a_avantetitulinline_regular.typeface.js"></script> <script type="text/javascript"> function doClear(theText) { if (theText.value == theText.defaultValue) { theText.value = "" } } function doDefault(theText) { if (theText.value == "") { theText.value = theText.defaultValue } } </script> <div> <div id="boldStuff2" class="typeface-js" style="font-family: a_AvanteTitulInline; font-size:60px"> <p class="typeface-js" style="font-family: a_AvanteTitulInline; font-size:60px;" id="boldStuff2">Digmast</p> </div> <div> <form onsubmit="changeText2(); return false;"> <input type="text" id="userInput" value="Введите текст" onFocus="doClear(this)" onBlur="doDefault(this)"/> <input type="submit" value="Проверить"/> </form> </div> </div> </body> </html> По итогу получается, что при submit class="typeface-js" не применяется к новому тексту, вместо этого выводит текст с простым шрифтом. Как это исправить?
создаешь файл your_php_file_path.php PHP: //creates a image handle$img = imagecreate( 200, 200 );//choose a bg color, u can play with the rgb values$background = imagecolorallocate( $img,232, 0, 135 );//chooses the text color$text_colour = imagecolorallocate( $img, 255, 255, 255 );//sets the thickness/bolness of the lineimagesetthickness ( $img, 3 );//draws a line params are (imgres,x1,y1,x2,y2,color)imageline( $img, 20, 130, 165, 130, $text_colour );//pulls the value passed in the URL$text = $_GET['text'];$text_font = $_GET['text_font'];// place the font file in the same dir level as the php fileif(!empty($text_font)){ $font = $text_font; }else$font = 'fontsDir/comic.ttf';//this function sets the font size, places to the co-ordsimagettftext($img, 100, 0, 11, 120, $text_colour, $font, $text);//places another text with smaller sizeimagettftext($img, 16, 0, 10, 160, $text_colour, $font, 'Small Text');//alerts the browser abt the type of content i.e. png imageheader( 'Content-type: image/png' );//now creates the imageimagepng( $img );//destroys used resourcesimagecolordeallocate( $text_color );imagecolordeallocate( $background );imagedestroy( $img ); потом этот файл загружаешь HTML: <img id='text' src='your_php_file_path.php' /> <a href="#" id="refresh">Refresh text</a> <script> $('#refresh').click(function(){ $('#text').attr({ src:'your_php_file_path.php?text_font=arial.ttf&text=tut-prosto-text', }); }); </script> этого хватит что бы на мысль навести и немного модифицировав получить нужный результат с картинкой если нужен через джаваскрипт - в лс, если надо полностью под нужны - в лс
