@FONT-FACE WEBSITE X5 PROFESSIONAL 10
Author: Marco P.Ciao a tutti, da poco ho creato un sito web con Website X5 Professional 10 con 2 tipi di caratteri "non standard". Ho letto sul web che per fare in modo che ogni browser veda questi tipi di carattere cè una "procedura" chiamata @font-face. I caratteri in questione sono il BITING.TTF e il BORG9.TTF. Allora, per prima cosa sono andato su fontsquirrel.com e ho caricato i miei caratteri e ho scaricato i 2 file .zip dal sito; uno per ogni carattere. Ora vorrei capire cosa fare con questi file scaricati; ho cercato aiuto ma non ne capisco quasi niente di codice quindi non ho capito tanto dalle risposte lette.. Ho letto che bisogna inserire un codice nell area head, ma io nell' area head ho già inserito il codice di google analitycs..Qualcuno può spiegarmi la procedura passo-passo su come e quali file utilizzare, dove metterli, e sopratutto quali codici scrivere e dove??
questa parte di codice la metti al passo 1, sezione esperto, prima della chiusura del tag head, cambiando il nome della font...
<style>
@font-face {
font-family: 'GessoRegular';
src: url('files/GESSO___-webfont.eot');
src: url('files/GESSO___-webfont.eot?#iefix') format('embedded-opentype'),
url('files/GESSO___-webfont.woff') format('woff'),
url('files/GESSO___-webfont.ttf') format('truetype'),
url('files/GESSO___-webfont.svg#GessoRegular') format('svg');
font-weight: normal;
font-style: normal;
}
</style>
questo nell'ogg. html tab esperto, per definire i vari tag (cambiando i nomi delle font)...
h2 {font-family: 'AmaranthItalic'; font-size:36px; color:blue;}
h3 {font-family: 'AmaranthItalic'; font-size:36px; color:blue;padding-top:36px;}
#carattere1 {font-family: 'AmaranthItalic'; font-size:24px; color:blue;padding-top:24px;}
#testo1 {font-family: 'AmaranthItalic'; font-size:14px; color:blue;padding-top:24px;}
alleghi tutte le variabili delle font con le varie estensioni...
e nel corpo dell'ogg html richiami i vari tag all'occorrenza...
Author
Ciao Skeggia 12 e grazie per la risposta; ti scrivo il mio codice che ho messo nella sezione esperto, prima della chiusura del tag head, per sapere se è scritto correttamente o no:
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m[removed].insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'xx-xxxxxxxx-xx', 'auto');
ga('send', 'pageview');
</script>
<style>
@font-face {
font-family: 'biting_my_nailsregular';
src: url('files/biting-webfont.eot');
src: url('files/biting-webfont.eot?#iefix') format('embedded-opentype'),
url('files/biting-webfont.woff') format('woff'),
url('files/biting-webfont.ttf') format('truetype'),
url('files/biting-webfont.svg#biting_my_nailsregular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'borg9regular';
src: url('files/borg9-webfont.eot');
src: url('files/borg9-webfont.eot?#iefix') format('embedded-opentype'),
url('files/borg9-webfont.woff') format('woff'),
url('files/borg9-webfont.ttf') format('truetype'),
url('files/borg9-webfont.svg#borg9regular') format('svg');
font-weight: normal;
font-style: normal;
}
<style>
La prima parte è il codice di google analitycs che già avevo messo e la seconda parte è il codice che mi hai scritto te cambiando il nome del font. E' giusto scritto così o devo modificarlo?
Poi nella parte src: url('files/.. devo lasciare scritto files o devo cambiarlo?
L'altro codice non sono riuscito a inserirlo perchè non so cosa sia l' ogg. html tab esperto e dove sia..
Dove lo trovo l' ogg. html tab esperto??
si, dovrebbe andare bene...
per il resto...non so di che versione del programma sei in possesso, perchè non risulta nel tuo profilo, ma vale per tutte le versioni...
quando sei sulla griglia della pagina, a destra fra gli strumenti che hai la possibilità di posizionare sulla griglia c'è "HTML e widgets"...lo clicchi e lo trascini sulla griglia...ci fai doppio click sopra nella finestra che ti si presenta, ci devi inserire il codice che poi verrà mostrato nella pagina...poi in alto a destra trovi una linguetta con scritto esperto, la clicchi e nella parte alta aggiungi il codice successivo...
ho scritto quanto sopra, ma ... queste sono le basi del funzionamento di website...se non conosci l'oggetto HTML e widgets, già ti cimenti in inserimenti di codice esterno...io prima prenderei confidenza con tutti gli strumenti di website e poi....ma fai te...ciao...
Author
Ciao e grazie x la risposta; ascolta ho seguito questa guida http://answers.websitex5.com/post/26507 perchè di quello che mi hai scritto te non ci ho capito niente..
Ho seguito passo-passo la guida e ho fatto così:
1) Sono andato su impostazioni Generali, sezione Esperto e nel campo codice personalizzato per la sezione HEAD ho messo i seguenti codici rinominando prima i 2 file CSS scaricati da fontsquirrel.com:
<link href="files/stylesheet1.css" type="text/css" rel="stylesheet">
<link href="files/stylesheet2.css" type="text/css" rel="stylesheet">
2) Poi sono andato su creazione della Pagina e ho inserito un Oggetto HTML e Widget nella Home Page e ho aperto l'editor nella sezione Esperto
3) Cliccando su aggiungi ho caricato per ogni file di testo i rispettivi file EOT, WOFF, TIF e SVG lasciando files come Percorso relativo su Server.
4) Ho importato sempre nello stesso Oggetto HTML e Widget, sotto i file caricati prima, sempre nella cartella files, in modo che sia insieme ai font, un file CSS da me modificato chiamato stylesheet12.css, questo:
@font-face {
font-family: 'biting_my_nailsregular';
src: url('files/biting-webfont.eot');
src: url('files/biting-webfont.eot?#iefix') format('embedded-opentype'),
url('files/biting-webfont.woff') format('woff'),
url('files/biting-webfont.ttf') format('truetype'),
url('files/biting-webfont.svg#biting_my_nailsregular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'borg9regular';
src: url('files/borg9-webfont.eot');
src: url('files/borg9-webfont.eot?#iefix') format('embedded-opentype'),
url('files/borg9-webfont.woff') format('woff'),
url('files/borg9-webfont.ttf') format('truetype'),
url('files/borg9-webfont.svg#borg9regular') format('svg');
font-weight: normal;
font-style: normal;
}
Poi ho salvato tutto..
E' giusto il mio procedimento? Ho sbagliato qualcosa o va bene?
P.s: posseggo Website X5 Professional 10..
Grazie a chi mi aiuterà..
Author
Mi sa che ho sbagliato a inserire questi 2 codici nel campo esperto sezione HEAD:
<link href="files/stylesheet1.css" type="text/css" rel="stylesheet">
<link href="files/stylesheet2.css" type="text/css" rel="stylesheet">
Credo di aver sbagliato perchè poi nell' Oggetto HTML e Widget della Homepage ho aggiunto questo file CSS modificato e chiamato stylesheet12.css..
Quindi ora ho inserito questo codice nel campo esperto sezione HEAD:
<link href="files/stylesheet12.css" type="text/css" rel="stylesheet">
E' corretto così il procedimento? Sbaglio qualche passo?
forse non riesco a farmi capire, sicuramente colpa mia...
ma io ho scritto esattamente quello che hai fatto...se tu mi dici che non sai cosa sia l'ogg. html, io te lo spiego, e poi mi dici che inserisci nella griglia di pagina un ogg. html e widget...voglio pensare di aver capito male io...
vado avanti...se tu inserisci i pezzi di codice in tab esperto prima della chiusura del tag head che partono con @fontface.... che lo inserisci a fare lo stylesheet, che contiene lo stesso codice?
Domanda banale... hai scritto qualcosa nella finestra principale dell'oggetto html per far comparire qualcosa? Prova a postare qualche screenshot o il link a quello che hai creato, in modo da suggerirti qualcosa...
Author
Guarda io pensavo che l'ogg.html fosse un file chiamato apposta, non avevo capito che con l'abbreviazione ogg. tu indendevi oggetto..
Comunque il codice che ho inserito nella tabella esperto prima della chiusura del tag head è questo:
<link href="files/stylesheet12.css" type="text/css" rel="stylesheet">
Come puoi vedere non ce scritto @fontface da nessuna parte..
@fontface è scritto nel file stylesheet caricato.. cioè questo:
@font-face {
font-family: 'biting_my_nailsregular';
src: url('files/biting-webfont.eot');
src: url('files/biting-webfont.eot?#iefix') format('embedded-opentype'),
url('files/biting-webfont.woff') format('woff'),
url('files/biting-webfont.ttf') format('truetype'),
url('files/biting-webfont.svg#biting_my_nailsregular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'borg9regular';
src: url('files/borg9-webfont.eot');
src: url('files/borg9-webfont.eot?#iefix') format('embedded-opentype'),
url('files/borg9-webfont.woff') format('woff'),
url('files/borg9-webfont.ttf') format('truetype'),
url('files/borg9-webfont.svg#borg9regular') format('svg');
font-weight: normal;
font-style: normal;
}
Cosa dovrei scrivere nella finestra principale dell'oggetto html per far comparire qualcosa??
...!... come mai non risulta nel tuo profilo...?...
... se il programma ha licenza regolare, si vedrebbe in evidenza...
... magari sarà perchè non ti sei registrato qui qui con l'e-mail di prima registrazione del Programma ed usato questa per accedere; ...altrimenti devi chiedere allo STAFF la regolarizzazione del Profilo con l'e-mail che hai in uso...
.
ciao
scusa marco, ma forse sei distratto quando leggi:
ho infatti scritto, che è inutile scrivere il codice
<link href="files/stylesheet12.css" type="text/css" rel="stylesheet">
in head in quanto al suo interno è scritto il codice che inizia con @fontface...
quindi sarebbe un doppione e quindi non lo devi neanche allegare nell'oggetto html...
nell'oggetto html devi scrivere i testi che vuoi compaiano nelle pagine...ma se fai questa domanda avevo un dubbio ma ora ho la certezza che tu mi stia prendendo in giro...chiudo gli interventi...ti risponderanno altri...
Author
Cara skeggia 12 qui non ce nessuno che ti sta prendendo in giro, ma se come scrivi o tenti di spiegare non si capisce niente non è colpa mia.Parli sempre generalizzando e per un ignorante come me non si capisce niente.
... prima o poi ci si capisce, se si vuole...
... oltre a regolarizzare il profilo, ...avevi già ricevuto questo suggerimento, fondamentale per capirsi meglio e correggere il tiro sui suggerimenti...
... in breve, "aiutare per essere aiutati" ...
... comunque, basterebbe seguire anche i consigli dello STAFF e visionare il file di progetto allegato: http://answers.websitex5.com/post/26507
.
ciao