Agregar fuente a Generador de Texto OnLine El código tenia al rededor de 30 fuentes, yo se las quite y deje solo tres para ver si funcionaba. Si lo hace. Como dije, quiero agregar mi propia fuente y que las personas puedan seleccionarla, el caso es que después de horas observando, probando, y modificando el código, no logro dar con el modo de hacerlo posible.
Si alguien por favor, sabe como hacer lo que quiero, por favor, compartalo conmigo...
Este es el código:
Código:
<html lang="en-US" class=" csstransforms csstransforms3d csstransitions"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<title>Mason Codex Generator</title>
<link href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css">
<link rel="stylesheet" id="symple_shortcode_styles-css" href="http://fontmeme.com/wp-content/plugins/symple-shortcodes/includes/css/symple_shortcodes_styles.css?ver=4.1.1" type="text/css" media="all">
<link rel="stylesheet" id="style-css" href="http://fontmeme.com/wp-content/themes/test/style.css?ver=4.1.1" type="text/css" media="all">
</head>
<body class="single single-post postid-1065 single-format-standard post-template post-template-post_fonts_styles-php" data-pin-hover="true">
<div id="wrap" class="clearfix">
<div id="main-content" class="clearfix">
<script type="text/javascript" src="http://fontmeme.com/wp-content/themes/test/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://fontmeme.com/wp-content/themes/test/js/colorpicker.js"></script>
<script language="JavaScript">var _text_text={"text":null};var _lock_text={"text":"Your Text Here"}</script>
<script language="JavaScript">
<!--
var _is_lock="";
var patternpickerParent=1;
function encode_url(url)
{
url = escape(url);
url = url.replace(/\+/g, '%2B').replace(/\"/g,'%22').replace(/\'/g, '%27').replace(/\//g,'%2F');
return url;
}
function rgb2hex(rgb) {
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
function hex(x) {
return ("0" + parseInt(x).toString(16)).slice(-2).toUpperCase();
}
return hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
function image_code(){
$("#misc_embed").show();
}
function get_large_image(){
var text=encode_url(document.getElementById('string').value);
if(_is_lock=='1'){
text=encode_url(_lock_text.text);
}else{
if(text==encode_url(_text_text.text)){
text=encode_url(_lock_text.text);
}
}
var name=$('#font').val();
var size=400;
var n=text.length;
if(n<5){
size=1000;
}
var style_option=$("input[name='style']:checked").val();
var style_color='';
var style_pattern='';
var style_str='';
if(style_option=="color"){
style_color=$("#colorSelector div").css('background-color');
style_color=rgb2hex(style_color);
style_str='&style_color='+style_color;
}else{
style_pattern=$("#pattern_1 img").attr('src');
var fromIndex=style_pattern.substring(0,style_pattern.lastIndexOf("/")).lastIndexOf("/")+1;
style_pattern=style_pattern.substring(fromIndex);
style_str='&style_pattern='+style_pattern;
}
var preUrl='http://fontmeme.com/'+'createalt.php?text='+text+"&name="+name+"&size="+size
+style_str;
var apiUrl="http://www.zazzle.com/api/create/at-238192468944798606?rf=238192468944798606&zbar=true&ax=DesignBlast&sr=250545266969959865&cg=196700357346462404&fwd=DesignTool&coverimage=";
preUrl=apiUrl+encodeURIComponent(preUrl);
window.open(preUrl);
}
function update_image()
{
var text=encode_url(document.getElementById('string').value);
if(_is_lock=='1'){
text=encode_url(_lock_text.text);
}else{
if(text==encode_url(_text_text.text)){
text=encode_url(_lock_text.text);
}
}
var name=$('#font').val();
var size=$("#size").val();
var lunkuo_size=$("#lunkuo_size").val();
var style_option=$("input[name='style']:checked").val();
var style_color='';
var style_pattern='';
var style_str='';
if(style_option=="color"){
style_color=$("#colorSelector div").css('background-color');
style_color=rgb2hex(style_color);
style_str='&style_color='+style_color;
}else{
style_pattern=$("#pattern_1 img").attr('src');
var fromIndex=style_pattern.substring(0,style_pattern.lastIndexOf("/")).lastIndexOf("/")+1;
style_pattern=style_pattern.substring(fromIndex);
style_str='&style_pattern='+style_pattern;
}
var preUrl='http://fontmeme.com/'+'embed.php?text='+text+"&name="+name+"&size="+size
+style_str;
var preUrlEmbed='http://fontmeme.com/'+'embed.php?text='+text+"&name="+name+"&size="+size
+style_str;
$("#embed_xhtml").val('<a href="http://fontmeme.com/cursive-fonts/"><img src="'+preUrlEmbed+'" alt="Cursive Fonts"></a>');
$("#embed_xxhtml").val('[url=http://fontmeme.com/cursive-fonts/][img]'+preUrlEmbed+'[/img][/url]');
document['text_image'].src = preUrl;
}
function download_image()
{
var text=encode_url(document.getElementById('string').value);
if(_is_lock=='1'){
text=encode_url(_lock_text.text);
}else{
if(text==encode_url(_text_text.text)){
text=encode_url(_lock_text.text);
}
}
var name=$('#font').val();
var size=$("#size").val();
var lunkuo_size=$("#lunkuo_size").val();
var style_option=$("input[name='style']:checked").val();
var style_color='';
var style_pattern='';
var style_str='';
if(style_option=="color"){
style_color=$("#colorSelector div").css('background-color');
style_color=rgb2hex(style_color);
style_str='&style_color='+style_color;
}else{
style_pattern=$("#pattern_1 img").attr('src');
var fromIndex=style_pattern.substring(0,style_pattern.lastIndexOf("/")).lastIndexOf("/")+1;
style_pattern=style_pattern.substring(fromIndex);
style_str='&style_pattern='+style_pattern;
}
var preUrl='http://fontmeme.com/wp-content/themes/test/'+'download.php?text='+text+"&name="+name+"&size="+size
+style_str;
window.location = preUrl;
}
function print_image()
{
var url = 'http://fontmeme.com/wp-content/themes/test/font_print.php?';
url += 'text=' + encode_url(document.getElementById('string').value);
url += '&text_color=' + encode_url(document.getElementById('text_color').value);
url += '&size=' + encode_url(document.getElementById('size').value);
url += '&font=' + encode_url(document.getElementById('font').value);
window.open(url);
}
function download_font()
{
var url = 'http://fontmeme.com/wp-content/themes/test/font_download.php?';
url += 'font=' + encode_url(document.getElementById('font').value);
window.open(url);
}
//-->
</script>
<div id="single-post-content" class="container sidebar-bg clearfix">
<div id="post" class="clearfix">
<header id="post-heading">
<h1><a rel="bookmark" title="Mason Generator">Mason Generator</a></h1>
</header>
<div class="generator" align="center">
<div class="table" cellpadding="3" cellspacing="3">
<div valign="top">
<div><strong>SELECCIONAR FUENTE</strong></div>
<select name="font" id="font" size="5" style="width:80%;height:180px;">
<option value="Redressed.ttf" selected="selected">Redressed</option>
<option value="leaguescriptnumberone.ttf">leaguescriptnumberone</option>
<option value="Ginga.ttf">Ginga</option>
</select>
</div>
<strong>INGRESA TU TEXTO</strong>
<textarea style="width:80%; height:50px;" maxlength="200" name="string" id="string" cols="20" value="Your Text Here">Tu texto aquí</textarea>
<strong>SELECCIONA EL TAMAÑO</strong><a href="#none" id="jian">▼</a>
<a href="#none" id="jia">▲</a>
<input style="width:80%;" type="text" name="size" id="size" value="100">
<input type="radio" checked="checked" name="style" value="color"><strong>ESCOGE EL COLOR</strong>
<div id="colorSelector" class="datapickerSelector patternWrapper dp_control_element">
<a href="#none" class="picker_arrow">▼</a>
<div style="background-color: rgb(21, 21, 94);"></div>
</div>
<div valign="top">
<button style="width: 50%" class="symple-button red symple-all" onclick="update_image()">ENCRIPTAR</button>
</div>
<div class="gimage">
<img id="text_image" src="http://fontmeme.com/embed.php?text=Tu%20texto%20aqu%ED%0A&name=Redressed.ttf&size=100&style_color=15155E" name="text_image">
</div>
</div> <!--table-->
</div><!--generator-->
</div><!-- /post -->
</div> <!--single-->
</div>
</div>
</body>
</html>
Hay solo tres fuentes actualmente, yo lo que quiero, es agregar una propia para al final, eliminar las tres actuales y dejar solo la que yo agregare.
Un saludo a todos! :D
