Cambiare font con javascript

**evered** · 21-10-2014, 15:47

Ciao a tutti,

ho integrato twitter nel mio sito tramite il widget, purtroppo però non permette di base di cambiare impostazioni quali il colore e il tipo di font; cercando su internet sono riuscito a personalizzarlo grazie a jquery. Il problema rimane solo per quanto riguarda il tipo di font, perché finché uso quelli standard non c'è problema, se voglio usarne però uno che ho caricato sul server ed ho integrato nei css grazie al comando font-face non me lo vede.

il javascript in questione è questo:

codice:

<script>

		$(window).load(function()
		{
		// Define the style variables
		var $background_color = "#transparent";
		var $font = "ringbearermedium";
		var $font_weight = "normal";
		var $border_color = "#transparent";
		var $border_radius = "0px";
		var $text_color = "#ffffff";
		var $link_color = "#ffff99";
		var $name_color = "#ffffff";
		var $subtext_color = "#ffffff"; // Colour of any small text
		var $sublink_color = "#ffff99"; // Colour of smaller links, eg: @user, date, expand/collapse links
		var $icon_color = "#transparent"; // Color of the reply/retweet/favourite icons
		var $icon_hover_color = "#transparent"; // Hover color the reply/retweet/favourite icons
		var $header_background = "#transparent";
		var $header_text_color = "#ffff99";
		var $follow_button_link_color = "#5ea9dd";
		var $footer_background = "#36b787";
		var $footer_tweetbox_background = "#2d936d";
		var $footer_tweetbox_textcolor = "#ffffff";
		var $footer_tweetbox_border ="0px";
		var $load_more_background ="#2d936d";
		var $load_more_text_color = "#ffffff";


		// Apply the styles
		$("iframe").contents().find('head').append('<style>.html, body, h1, h2, h3, blockquote, p, ol, ul, li, img, iframe, button, .tweet-box-button{font-family:'+$font+' !important;font-weight:'+$font_weight+' !important;} .timeline{border-radius: ' + $border_radius + '!important;} .thm-dark .retweet-credit,.h-feed, .stats strong{color:' + $text_color + ' !important;}a:not(.follow-button):not(.tweet-box-button):not(.expand):not(.u-url), .load-more{color:' + $link_color + ' ;} .follow-button{color:' + $follow_button_link_color + ' !important;} .timeline-header{background:' + $header_background + '; border-radius:' + $border_radius + ' ' + $border_radius + ' 0px 0px;} .timeline-header h1 a{color:' + $header_text_color + ' !important;} .timeline-footer{border-radius:0px 0px ' + $border_radius + ' ' + $border_radius + ' !important; background:' + $footer_background + ' !important;} .tweet-box-button{background-color:' + $footer_tweetbox_background + ' !important; color:' + $footer_tweetbox_textcolor + ' !important; border:' + $footer_tweetbox_border + ' !important;} .timeline .stream, .tweet-actions{background:' + $background_color + ' !important;} .tweet-actions{box-shadow:0 0 10px 5px' + $background_color + ' !important;} .ic-mask{background-color:' + $icon_color + ' !important;} a:hover .ic-mask, a:focus .ic-mask{background-color:' + $icon_hover_color + ' !important;} .p-name{color:'+$name_color+' !important;} .customisable-border{border-color:' + $border_color + ' !important;} span.p-nickname, .u-url, .expand{color:'+$sublink_color+' !important;} .load-more, .no-more-pane {background-color:' + $load_more_background + ' !important; color:' + $load_more_text_color + '!important;} .retweet-credit{color:' + $subtext_color + ' !important;}</style>');
		});


	</script>

**m4rko80** · 23-10-2014, 15:09

Ciao, domanda forse stupida

Appendi nell'iframe un css aggiuntivo dove usi font face.
Nella url relativa all'iframe è incluso questo font?
Perchè se presente nella tua pagina da dove modifichi è un conto ma se devo modficare il font nell'iframe ma in quel sorgente non esite ovviamente non penso possa andare.
Se la url dell'iframe e' del tuo stesso dominio, includi anche in quella pagina il font-face e poi manipolalo da dove preferisci.
I font classici probabilmente li altera perchè riconosciuti.

**evered** · 23-10-2014, 15:51

Originariamente inviata da m4rko80

Ciao, domanda forse stupida

Appendi nell'iframe un css aggiuntivo dove usi font face.
Nella url relativa all'iframe è incluso questo font?
Perchè se presente nella tua pagina da dove modifichi è un conto ma se devo modficare il font nell'iframe ma in quel sorgente non esite ovviamente non penso possa andare.
Se la url dell'iframe e' del tuo stesso dominio, includi anche in quella pagina il font-face e poi manipolalo da dove preferisci.
I font classici probabilmente li altera perchè riconosciuti.

Scusami ma non so cosa sia l'iframe. Io ho un foglio di stile in cui ho anche inserito il font-face con il nuovo font, il quale si trova nella cartella del sito.

**m4rko80** · 23-10-2014, 17:32

Forse ho inteso male?
ma qui non vai a modificare il css in un iframe??
$("iframe").contents().find('head').append('<style >.h...

**evered** · 23-10-2014, 17:38

Originariamente inviata da m4rko80

Forse ho inteso male?
ma qui non vai a modificare il css in un iframe??
$("iframe").contents().find('head').append('<style >.h...

Non so, io l'ho preso direttamente da un sito che parlava dell'integrazione di twitter sui siti. Io di javascript non ci capisco niente, purtroppo. Solo css e html.

**tampertools** · 23-10-2014, 18:05

iframe -> html, quindi lo puoi capire

fa vedere il codice della pagina

Poi, se l'iframe è di un dominio diverso dal tuo, non puoi accederci con javascript (Same origin policy)

**evered** · 23-10-2014, 18:18

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>SICKENING Official Site - Brutal Death Metal from Italy</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <meta name="description" content="Sickening - The Beyond - New album out on early 2015 via Amputated Vein Records " />
     <meta name="keywords" content="sickening, the beyond, italy, brutal, death metal" />
      <link rel="shortcut icon" href="http://www.sickening.altervista.org/favicon.ico" />    
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <script language="javascript" type="text/javascript" src="js/jquery-1.10.2.js"></script>
    <script>
        $(window).load(function()
        {
        // Define the style variables
        var $background_color = "#transparent";
        var $font = "ringbearermedium";
        var $font_weight = "normal";
        var $border_color = "#transparent";
        var $border_radius = "0px";
        var $text_color = "#ffffff";
        var $link_color = "#ffff99";
        var $name_color = "#ffffff";
        var $subtext_color = "#ffffff"; // Colour of any small text
        var $sublink_color = "#ffff99"; // Colour of smaller links, eg: @user, date, expand/collapse links
        var $icon_color = "#transparent"; // Color of the reply/retweet/favourite icons
        var $icon_hover_color = "#transparent"; // Hover color the reply/retweet/favourite icons
        var $header_background = "#transparent";
        var $header_text_color = "#ffff99";
        var $follow_button_link_color = "#5ea9dd";
        var $footer_background = "#36b787";
        var $footer_tweetbox_background = "#2d936d";
        var $footer_tweetbox_textcolor = "#ffffff";
        var $footer_tweetbox_border ="0px";
        var $load_more_background ="#2d936d";
        var $load_more_text_color = "#ffffff";
        // Apply the styles
        $("iframe").contents().find('head').append('<style>.html, body, h1, h2, h3, blockquote, p, ol, ul, li, img, iframe, button, .tweet-box-button{font-family:'+$font+' !important;font-weight:'+$font_weight+' !important;} .timeline{border-radius: ' + $border_radius + '!important;} .thm-dark .retweet-credit,.h-feed, .stats strong{color:' + $text_color + ' !important;}a:not(.follow-button):not(.tweet-box-button):not(.expand):not(.u-url), .load-more{color:' + $link_color + ' ;} .follow-button{color:' + $follow_button_link_color + ' !important;} .timeline-header{background:' + $header_background + '; border-radius:' + $border_radius + ' ' + $border_radius + ' 0px 0px;} .timeline-header h1 a{color:' + $header_text_color + ' !important;} .timeline-footer{border-radius:0px 0px ' + $border_radius + ' ' + $border_radius + ' !important; background:' + $footer_background + ' !important;} .tweet-box-button{background-color:' + $footer_tweetbox_background + ' !important; color:' + $footer_tweetbox_textcolor + ' !important; border:' + $footer_tweetbox_border + ' !important;} .timeline .stream, .tweet-actions{background:' + $background_color + ' !important;} .tweet-actions{box-shadow:0 0 10px 5px' + $background_color + ' !important;} .ic-mask{background-color:' + $icon_color + ' !important;} a:hover .ic-mask, a:focus .ic-mask{background-color:' + $icon_hover_color + ' !important;} .p-name{color:'+$name_color+' !important;} .customisable-border{border-color:' + $border_color + ' !important;} span.p-nickname, .u-url, .expand{color:'+$sublink_color+' !important;} .load-more, .no-more-pane {background-color:' + $load_more_background + ' !important; color:' + $load_more_text_color + '!important;} .retweet-credit{color:' + $subtext_color + ' !important;}</style>');
        });
    </script>
</head>
<body>
    <div id="logo">
        <img src="images/logo.png" />
    </div>
       <div id="container">
        <div id="menu">
            <table class="menu" cellpadding="0" cellspacing="0">
                <tr>
                    <td class="menu"><a href="mailto:sickening@altervista.org" onfocus="this.blur()"><img src="images/mail.png" onmouseover="this.src='images/mail2.png'"
onmouseout="this.src='images/mail.png'"/></a></td>
                    <td class="menu"><a href="http://www.facebook.com/sickeningofficial" onfocus="this.blur()" target="_blank"><img src="images/facebook.png" onmouseover="this.src='images/facebook2.png'"
onmouseout="this.src='images/facebook.png'"/></td>
                    <td class="menu"><a href="http://www.youtube.com/sickeningofficial" onfocus="this.blur()" target="_blank"><img src="images/youtube.png" onmouseover="this.src='images/youtube2.png'"
onmouseout="this.src='images/youtube.png'"/></td>
                    <td class="menu"><a href="http://sickeningofficial.bandcamp.com" onfocus="this.blur()" target="_blank"><img src="images/bandcamp.png" onmouseover="this.src='images/bandcamp2.png'"
onmouseout="this.src='images/bandcamp.png'"/></td>
                    <td class="menu"><a href="webstore/index.htm" onfocus="this.blur()" target="_blank"><img src="images/store.png" onmouseover="this.src='images/store2.png'"
onmouseout="this.src='images/store.png'"/></td>
                </tr>
            </table>
        </div>
        <div id="contentsx">
            <table cellspacing="5"><tr><td><img class="eibonthumb" src="images/eibonsymbol.png" /></td><td><h1>news</h1></td><td><img class="eibonthumb" src="images/eibonsymbol.png" /></td></tr></table>

                <a class="twitter-timeline" href="https://twitter.com/sickeningband" height="150" data-tweet-limit="5" data-chrome="nofooter noborders transparent" data-widget-id="524305250144890880">Tweets di @sickeningband</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
            <br /><br />


            <table cellspacing="5"><tr><td><img class="eibonthumb" src="images/eibonsymbol.png" /></td><td><h1>tour dates</h1></td><td><img class="eibonthumb" src="images/eibonsymbol.png" /></td></tr></table>


                <script type='text/javascript' src='http://widget.bandsintown.com/javascripts/bit_widget.js'></script><a href="http://www.bandsintown.com/Sickening" class="bit-widget-initializer" data-prefix="fbjs" data-artist="Sickening">Sickening Tour Dates</a>
            <br /><br />


            <table cellspacing="5"><tr><td><img class="eibonthumb" src="images/eibonsymbol.png" /></td><td><h1>label</h1></td><td><img class="eibonthumb" src="images/eibonsymbol.png" /></td></tr></table>


                <a href="http://www.amputatedvein.com" onfocus="this.blur()" target="_blank"><img src="images/avrlogo.png" /></a>
            <br /><br />


            <table cellspacing="5"><tr><td><img class="eibonthumb" src="images/eibonsymbol.png" /></td><td><h1>members</h1></td><td><img class="eibonthumb" src="images/eibonsymbol.png" /></td></tr></table>


                <table cellpadding="4">


                    <tr>
                        <td><img class="thumb" src="images/claudio.jpg" /><br /><p>Claudio Miniati<br />Vocals</p></td>
                        <td><img class="thumb" src="images/alessandro.jpg" /><p>Alessandro Materassi<br />Guitars</p></td>
                    </tr>


                    <tr>
                        <td><img class="thumb" src="images/edoardo.jpg" /><p>Edoardo De Nardi<br />Bass</p></td>
                        <td><img class="thumb" src="images/marco.jpg" /><p>Marco Taiti<br />Drums</p></td>
                    </tr>


                </table>


            </div>


        <div id="contentdx">


<table cellspacing="5"><tr><td><img class="eibonthumb" src="images/eibonsymbol.png" /></td><td><h1>discography</h1></td><td><img class="eibonthumb" src="images/eibonsymbol.png" /></td></tr></table>


                
            <br /><br />


            <table cellspacing="5"><tr><td><img class="eibonthumb" src="images/eibonsymbol.png" /></td><td><h1>merch</h1></td><td><img class="eibonthumb" src="images/eibonsymbol.png" /></td></tr></table>


                <a href="http://www.sickeningofficial.com/webstore" onfocus="this.blur()"><img src="http://www.sickening.altervista.org/myspace/merchflyermyspace.jpg" width="260" /></a>


            <br /><br />


            <table cellspacing="5"><tr><td><img class="eibonthumb" src="images/eibonsymbol.png" /></td><td><h1>endorsements</h1></td><td><img class="eibonthumb" src="images/eibonsymbol.png" /></td></tr></table>


                <a href="http://www.blakhartguitars.com" onfocus="this.blur()" target="_blank"><img src="images/blakhart.png" /></a>
                <br /><br />
                <a href="http://www.sickdrummermagazine.com/index.php/the-drummers/death-grind/1111-marco-taiti.html" onfocus="this.blur()" target="_blank"><img src="images/sickdrummerlogo.jpg" /></a>


        </div>


        <div id="clr"></div>


            <table cellspacing="5"><tr><td><img class="eibonthumb" src="images/eibonsymbol.png" /></td><td><h1>biography</h1></td><td><img class="eibonthumb" src="images/eibonsymbol.png" /></td></tr></table>




    </div>


</body>
</html>

**tampertools** · 23-10-2014, 18:26

In quel codice non c'è nessun tag <iframe>

**evered** · 23-10-2014, 21:00

Originariamente inviata da tampertools

In quel codice non c'è nessun tag <iframe>

Quindi che significa? Io non l'avevo nominato l'iframe, non so manco che è.

**evered** · 29-10-2014, 18:20

Up.

Discussione: Cambiare font con javascript

Strumenti discussione

Ricerca discussione

Visualizza

Cambiare font con javascript

Permessi di invio