Pagina 1 di 3 1 2 3 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 29
  1. #1

    pillola 1: tutto sui testi / font


    E siamo arrivati a 1000 post
    Allora eccoci qua alla mia prima pillola,

    in questa pillola si ricapitoleranno tutte le tecniche e i consigli sull'uso dei caratteri e delle tag per il loro uso.

    1. TAG universali HTML per la scrittura
    2. TAG universali CSS per la scrittura (come bloccare la dimensione dei font con i browser, link)
    3. Lista font sistemi operativi principali
    4. Lista caratteri speciali
    5. Consigli sull'uso dell'html per le classi
    6. Si può usare un proprio font nelle pagine che facciamo?


    --------------------------------------------------

    1. TAG universali HTML per la scrittura:

    Qui troverete la sintassi html universale (dai primi browser a oggi) per formattare un testo

    <FONT color="#0000ff" face="Arial, Helvetica" size="3">testo formattato</FONT>

    <FONT></FONT> == tag deprecata dal w3 però è ancora la più universale essendo la più vecchia

    color="" == questo è il parametro per il colore del testo di solito viene dato in RGB con il metodo #RRGGBB

    face="" == il font utilizzato, per vedere la lista font andare a capitolo 3

    size="" == la dimensione del font, va da 1 a 7

    questà è la formattazione base universale, che parte dall'HTML 1.0

    --------------------------------------------------

    2. TAG universali CSS per la scrittura

    Molti post nel forum chiedono come formattare meglio un testo o come bloccarne la dimensione tra i browser.

    Qui bisogna entrare però nel CSS, e in questa pillola vi illustrerò i 2 metodi migliori

    la sintassi universale è questa (la tag STYLE va inserita nell HEAD)

    <STYLE type="text/css">
    FONT{
    font-family : Arial, Helvetica, sans-serif;
    color : #0000FF;
    font-size : 10px;
    font-style : normal;
    font-weight : normal;
    letter-spacing : 1px;
    line-height : 16px;
    text-decoration : none;
    }
    </STYLE>

    in questo caso abbiamo modificato le proprietà universali di FONT quindi ogni volta che utilizzeremo FONT nel nostro html prenderà queste proprietà

    font-family: arial; == il font utilizzato, vedi capitolo 3

    color : #0000FF; == il colore del font secondo metodo RGB

    font-size : 10px; == la dimensione fissa del font in px, è possibile metterla anche in punti o percentuale, ma è meglio lasciarla in px

    font-style : normal; == stile del font (normal, italic, oblique)

    font-weight : normal; == lo spessore del font, va da lighter a normal a bold, di solito per motivi di compatibilità (presenza di font nel sistema) si usa normal o bold

    letter-spacing : 1px; == lo spazio tra una lettera è l'altra, di solito non si mette nemmeno perchè i font si adattano carattere dopo carattere, ma aiuta in lunghi testi a scandire meglio le parole

    line-height : 16px; == l'interlinea tra una riga è l'altra, serve per migliorare la leggibilità, di solito per un font 10px si setta a 16 px

    text-decoration : none; == le decorazioni sul testo, di solito si imposta su none ma è possibile farlo: underline, overline, line-through, blink (non va con explorer)

    esiste anche la possibilità di inserire delle classi di font.

    <STYLE type="text/css">
    .nome_a_caso{
    font-family : Arial, Helvetica, sans-serif;
    color : #0000FF;
    font-size : 10px;
    font-style : normal;
    font-weight : normal;
    letter-spacing : 1px;
    line-height : 16px;
    text-decoration : none;
    }
    </STYLE>

    in questo caso non modifichiamo i settaggi di nessuna tag ma creiamo dei settaggi universali che possono essere richiamati nelle tag

    <FONT class="nome_a_caso">testo formattato</FONT>
    <TD class="nome_a_caso">testo formattato</TD>
    <P class="nome_a_caso">testo formattato</P>

    per i link bisogna modificare le tag con questi nomi

    A:link{...} == i link normali
    A:visited{...} == i link visitati
    A:hover{...} == quando passi sopra i link

    è anche possibile fare delle classi e richiamarle come abbiamo gia visto facendo

    A.nome_a_caso:link{...}
    A.nome_a_caso:visited{...}
    A.nome_a_caso:hover{...}

    --------------------------------------------------

    3. Lista font sistemi operativi principali

    Mac OS 7/8/9

    times
    courier
    helvetica
    symbol
    chicago
    new york
    geneva
    monaco
    palatino
    charcoal

    Windows 95

    arial
    comic sans MS
    courier new
    marlett
    symbol
    rimes new roman
    wingdings

    Windows 98

    abati MT
    arial
    arial black
    book antiqua
    calisto MT
    century gothic
    courier new
    impact
    lucida console
    lucida handwriting
    lucida sans
    lucida sans unicode
    marlett
    news gothic
    ocra
    symbol
    tahoma
    times new roman
    verdana
    webdings
    westminster
    wingdings

    Windows NT

    arial
    courier new
    lucida console
    lucida sans unicode
    symbol
    times new roman
    wingdings

    UNIX

    charter
    clean
    courier
    fxed
    helvetica
    lucida
    lucida bright
    lucida type writer
    new century schoolblook
    symbol
    terminal
    timas
    utopia

    Font supplementari da applicazioni

    Internet explorer 4/5 mac/win

    andale mono
    arial
    arial black
    comic sans MS
    georgia
    impact
    trebuchet MS
    verdana
    webdings

    Adobe Acrobat 5

    adobe sans MM
    adobe serif MM
    arial bold italic
    aial bold MT
    arial MT
    courier
    courier bold
    courier bold oblique
    curier oblique
    symbol
    times new roman PS
    zapf dingbats


    e la combinazione più universale tra i vari sistemi operativi è:
    Verdana, Arial, Helvetica, courier, sans-serif


    --------------------------------------------------

    4. Lista caratteri speciali

    esistono dei caratteri che vanno inseriti in una codifica speciale chiamata Entità derivata dall ASCII, qui sotto un elenco:

    !!! riunificate &..., li ho dovuti unire per limiti del forum

    & quot; == "
    & amp; == &
    & lt; == <
    & gt; == >
    & #8364 == €
    & copy; == ©
    & reg; == ®

    questa parte può essere usata con qualsiasi carattere che lo richiede (es: &egrave
    & agrave; == à
    & aacute; == á
    & acirc; == â
    & atilde; == ã
    & auml; == ä
    & AElig; == Æ
    & Aring; == Å

    & ccedil; == Ç
    & Oslash; == Ø
    & THORN; == Þ
    & nbsp; == spazio
    & iexcl; == ¡
    & cent; == ¢
    & pound; == £
    & curren; == ¤
    & yen; == ¥
    & sect; == §
    <SUP><FONT SIZE="-1">TM</FONT></SUP> == tm
    & brvbar; == ¦
    & uml; == ¨
    & ordf; == ª
    & laquo; == «
    & not; == ¬
    & shy; == ¬
    & macr; == ¯
    & plusmn; == ±
    & deg; == °
    & sup2; == ²
    & sup3; == ³
    & micro; == µ
    & para; == ¶
    & middot; == ·
    & raquo; == »
    & frac14; == ¼
    & frac12; == ½
    & frac34; == ¾
    & iquest; == ¿
    & ETH; == Ð
    & times; == ×
    & divide; == ÷
    & ndash; == –
    & mdash; == —
    & lsquo; == ‘
    & rsquo; == ’
    & ldquo; == “
    & rdquo; == ”

    altri caratteri speciali ASCII li trovate su:

    http://www.asciitable.it/

    --------------------------------------------------

    5. Consigli sull'uso dell'html per le classi

    l'unico consiglio che do in questo caso è di utilizzare la tag <FONT></FONT>, anche se deprecata, perchè l'utilizzo di tag quali

    </P> o <DIV></DIV> può richiedere css aggiuntivo per metterle inline

    --------------------------------------------------

    6. Si può usare un proprio font nelle pagine che facciamo?

    si p possibile ma in questo caso citerò saintex e xdesign:

    esistono 2 tecnologie chiamate truedoc e weft e se combinate si coprono praticamente tutti i browser (netscape 6/7 hanno troppi pochi utenti per calcolarli)

    discutendo con saintex su due discussioni:

    http://forum.html.it/forum/showthrea...threadid=49003
    http://forum.html.it/forum/showthrea...threadid=64999

    si è giunti ha questa conclusione:

    citazione da saintex

    all'epoca ero riuscito a sapere questo:
    - weft funziona solo con IE
    - funziona solo se le scritte hanno pochi caratteri, altrimenti (visto che più sono i caratteri, più cerca di comprimere) sgrana

    cmq combinando font embedded + vbscript + css ero riuscito a fare questo, che non è male:
    http://www.geocities.com/odradrek/pr...arattere3.html

    un sistema alternativo per i fonts embedded è truedoc
    che è embedded in NN4 e funziona con un plugin in IE (non mi ricordo NN6).
    esistono anche alcuni caratteri già fatti:
    http://www.truedoc.com/webpages/avai...avail_pfrs.htm

    purtroppo truedoc diversamente da quello che c'è scritto qui:
    http://hotwired.lycos.com/webmonkey/99/45/index1a.html

    non lo vendono più:
    http://www.truedoc.com/webpages/FAQs....html#buywhere

    E questo è tutto quello che so sui font embedded...
    truedoc non è effettivamente più reperibile.

    --------------------------------------------------

    spero che per il momento basti, lo so che questa pillola non introduce niente di nuovo ma servirà per i nuovi forumisti come punto di partenza per evitare discussioni inutili

    a 1500 la seconda
    Luca Mascaro
    Usability e Accessibility Engineer, User Interface Designer/Engineer
    NOW BLOG
    W3C HTML & WCAG WG Member for IWA/HWG

  2. #2
    bravo blackino! Queste sono cose che bisogna sapere anche se le diamo abbastanza per scontate fin quando non arrivano i newbie pieni di dubbi eh eh eh....

    Attendo con ansia la tua prossima pillolina

  3. #3
    ti annuncio che la prossima pillolina probabilmente sarà sulle versioni browser/plugin

    da leccarsi i baffi :gren:
    Luca Mascaro
    Usability e Accessibility Engineer, User Interface Designer/Engineer
    NOW BLOG
    W3C HTML & WCAG WG Member for IWA/HWG

  4. #4
    Originariamente inviato da blakwolf
    ti annuncio che la prossima pillolina probabilmente sarà sulle versioni browser/plugin

    da leccarsi i baffi :gren:
    crossbrowser?


    da delirio!

  5. #5
    Utente di HTML.it
    Registrato dal
    Jan 2002
    Messaggi
    633
    GRANDE blakwolf!!!
    salvo subito questo 3d!!

    :metallica :metallica :metallica
    Alcuni miei articoli in PRO.HTML.IT: JavaScript | DHTML | DOM
    Sviluppo : wedev | forum

  6. #6
    Utente di HTML.it
    Registrato dal
    Aug 2001
    Messaggi
    187
    Alla faccia!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    Complimenti Black wolf

  7. #7
    blak wolf

    è una lunga storia :quipy:
    Luca Mascaro
    Usability e Accessibility Engineer, User Interface Designer/Engineer
    NOW BLOG
    W3C HTML & WCAG WG Member for IWA/HWG

  8. #8
    Utente di HTML.it
    Registrato dal
    Dec 2001
    Messaggi
    3,259
    uh... il black si è messo a scrivere la pillola....


    poi me ne dicevi dietro a me :-)

    complimenti! ora siamo tutti 2 dei grandi

  9. #9
    lo so :gren:

    ora manca solo standard :master:
    Luca Mascaro
    Usability e Accessibility Engineer, User Interface Designer/Engineer
    NOW BLOG
    W3C HTML & WCAG WG Member for IWA/HWG

  10. #10
    Utente di HTML.it
    Registrato dal
    Jan 2002
    Messaggi
    633
    Originariamente inviato da blakwolf
    ora manca solo standard :master:
    a fare che? ad arrivare a 1000 post? e a metterci una pillolina?
    ho già un'idea di cosa sarà:
    "il link a tutti i tuoi 1000 post precedenti a questo!"

    sicuramente sarebbe un pillola utilissima!!!

    blak's power!!!!!!!! :metallica :metallica :metallica :metallica



    PS: saintex e Phantom potrebbero riaprire la farmacia
    Alcuni miei articoli in PRO.HTML.IT: JavaScript | DHTML | DOM
    Sviluppo : wedev | forum

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.