Questo sito utilizza cookies solo per scopi di autenticazione sul sito e nient'altro. Nessuna informazione personale viene tracciata. Leggi l'informativa sui cookies.
Username: Password: oppure
HTML / CSS - Font-face funge male su IE
Forum - HTML / CSS - Font-face funge male su IE

Pagine: [ 1 2 ] Precedente | Prossimo
Avatar
()
Newbie


Messaggi:
Iscritto:

Segnala al moderatore
Postato alle 1:00
Giovedì, 01/01/1970
Salve a tutti,
Ho creato una pagina in cui uso un font personalizzato con la @-rule @font-face
Se la visualizzo con FF, tutto ok. Fino a ieri anche con IE, ma oggi non va più.
Se provo a cambiare la codifica dei caratteri, ecco ricomparire il font. Ma appena ricarico la pagina scompaiono di nuovo.
L'unica cosa che ho modificato da ieri a oggi è stato il padding della scritta, come può avere influito sul titolo però?

Odio Internet Explorer.... :_doubt::_doubt:

PM Quote
Avatar
D@vide (Member)
Expert


Messaggi: 450
Iscritto: 30/06/2010

Segnala al moderatore
Postato alle 11:01
Martedì, 08/03/2011
Ti ricordo che @font-face è una feature di CSS3 e essi non sono completamente supportati da tutti i browser. Inoltre ti ricordo che è rischioso usarlo comunque anche su Firefox perché non saprai come le nuove versioni lo supporteranno e se lo supporteranno.
Comunque posta il codice (X)HTML che vedo di darci un occhiata:k:

PM Quote
Avatar
()
Newbie


Messaggi:
Iscritto:

Segnala al moderatore
Postato alle 11:37
Martedì, 08/03/2011
Ciao D@vide, grazie per la risposta ^^
http://ateam.altervista.org/
Questo è il link del sito.

Se guardi la pagina che ti si apre (la Home), la scritta è visualizzata bene (The A-Team!) e quella e la visualizza SEMPRE bene su IE e su FF
Se guardi nelle altre pagine, i titoli (che dovrebbero avere il font del titolo della home) invece non lo sono.
C'è qualcosa di sbagliato nel mio codice secondo me, perchè se una pagina non fa problemi e l'altra si ci sarà un motivo...

Questo è il foglio di stile che uso per formattare
Codice sorgente - presumibilmente Delphi
  1. @font-face {
  2. font-family: Blockography;
  3. src: url(/Fonts/Blockography.eot);
  4. src: local('Blockography'), url(/Fonts/Blockography.ttf), format('truetype');
  5. }
  6.  
  7. html, body, div, span, applet, object, iframe,
  8. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  9. a, abbr, acronym, address, big, cite, code,
  10. del, dfn, em, font, img, ins, kbd, q, s, samp,
  11. small, strike, strong, sub, sup, tt, var,
  12. dl, dt, dd, fieldset, form, label, legend,
  13. table, caption, tbody, tfoot, thead, tr, th, td {
  14. margin: 0;
  15. padding: 0;
  16. border: 0;
  17. outline: 0;
  18. font-weight: inherit;
  19. font-style: inherit;
  20. font-size: medium;
  21. font-family: Tahoma, Arial, sans-serif;
  22. vertical-align: baseline;
  23. text-indent: 0;
  24. }
  25. html {
  26. padding: 0 15px;
  27. }
  28. /* remember to define focus styles! */
  29. :focus {
  30. outline: 0;
  31. }
  32. body {
  33. line-height: 1;
  34. color: white;
  35. background: #303030 repeat fixed;
  36. }
  37. ol, ul, li {
  38. list-style: disc outside;
  39. color: white;
  40. margin: 0;
  41. padding: 0px 2px;
  42. border: 0;
  43. outline: 0;
  44. font-weight: inherit;
  45. font-style: inherit;
  46. font-size: medium;
  47. font-family: Tahoma, Arial, sans-serif;
  48. vertical-align: baseline;
  49. text-indent: 0;
  50. }
  51.  
  52. /* tables still need ‘cellspacing="0"’ in the markup */
  53. table {
  54. border-collapse: separate;
  55. border-spacing: 0;
  56. }
  57. caption, th, td {
  58. text-align: left;
  59. font-weight: normal;
  60. }
  61. strong {
  62. font-weight: bold;
  63. padding: 0;
  64. }
  65. u {
  66. text-decoration: underline;
  67. padding: 0;
  68. }
  69. cite {
  70. font-style: italic;
  71. padding: 0;
  72. }
  73. blockquote:before, blockquote:after,
  74. q:before, q:after {
  75. content: "";
  76. }
  77. blockquote, q {
  78. quotes: "" "";
  79. }
  80. img
  81. {
  82.         -ms-interpolation-mode: bicubic;
  83. }
  84. a:link    {text-decoration: underline; color: #FFFF00;padding: 0;}
  85. a:visited {text-decoration: underline; color: #FFA500;padding: 0;}
  86. a:hover   {text-decoration: underline; color: #FFA500;padding: 0;}
  87.  
  88. /*Titoli*/
  89. .MainTitle {font-family: Blockography; font-size: 100px; color: white; font-variant: small-caps; padding: 0;}
  90. .LargeTitle {font-family: Blockography; font-size: 60px; color: white; font-variant: small-caps; padding: 0;}
  91. .MediumTitle {font-family: Blockography; font-size: 45px; color: white; padding: 0;}
  92. .SmallTitle {font-family: "Arial Black", sans-serif; font-size: 20px; color: #FFFF00; padding: 0;}
  93. .Date {font-family: Tahoma, Arial, sans-serif; font-size: large; font-weight: bold; color: #FFFFFF; padding: 0;}

Se dai un'occhiata all'ultima parte ci sono le classi che uso per i titoli:
.MainTitle è quella che uso per la Home
.LargeTitle per i titoli nelle altre pagine
.MediumTitle per i titoli dei paragrafi nelle altre pagine

Testo quotato

Ti ricordo che @font-face è una feature di CSS3 e essi non sono completamente supportati da tutti i browser. Inoltre ti ricordo che è rischioso usarlo comunque anche su Firefox perché non saprai come le nuove versioni lo supporteranno e se lo supporteranno.

@font-face era una specifica di CSS2.1 e ripresa anche nei CSS3.
Il supporto è garantito da: Internet Explorer 4 e versioni successive, Firefox 3.5, Safari 3.1 e versioni successive, attivabile anche si Google Chrome.
Quindi non è così eretica e visionaria l'idea di poter utilizzare qualcosa di più accativante dell'Arial nei propri siti.
In ogni caso, su IE fino a ieri funzionava, quindi non è un problema di browser.

PM Quote
Avatar
D@vide (Member)
Expert


Messaggi: 450
Iscritto: 30/06/2010

Segnala al moderatore
Postato alle 12:55
Martedì, 08/03/2011
Ho dato un occhiata veloce ai CSS e sinceramente non trovo errori relativi a questo problema.

PS: ho notato che usi i frame, ti conviene abbandonare questo vizio, esistono soluzioni molto più eleganti e pulite per ottenere risultati simili.

PM Quote
Avatar
()
Newbie


Messaggi:
Iscritto:

Segnala al moderatore
Postato alle 15:42
Martedì, 08/03/2011
Si, infatti è nei todo :k:

PM Quote
Avatar
Mte90 (Member)
Guru


Messaggi: 1144
Iscritto: 25/03/2008

Segnala al moderatore
Postato alle 17:22
Martedì, 08/03/2011
Sfatiamo un mito font face non è una feature css3 :-P
Font-face è una feature molto vecchia presente da css2 ma mai usata per problemi di sicurezza.
Se cercate su internet ie la supporta da ie4 :rofl:
Per il tuo problema devi usare un debugger per ie.
Ti consiglio di scaricare e installare questo pack http://utilu.com/IECollection/ che contiene tute le versioni di ie più firebug e un debugger made in microsoft.
Non posso aiutarti perchè sono un linuxiano e non ho ie sul sistema.
Io ormai per ie ho deciso di perderci meno tempo possibile e integro css3pie dove serve.

PM Quote
Avatar
()
Newbie


Messaggi:
Iscritto:

Segnala al moderatore
Postato alle 9:10
Mercoledì, 09/03/2011
Testo quotato
Postato originariamente da Mte90:
Sfatiamo un mito font face non è una feature css3 :-P
Font-face è una feature molto vecchia presente da css2 ma mai usata per problemi di sicurezza.
Se cercate su internet ie la supporta da ie4 :rofl:

E io che ho detto? :rofl:
Testo quotato
Postato originariamente da Mte90:
Per il tuo problema devi usare un debugger per ie.
Ti consiglio di scaricare e installare questo pack http://utilu.com/IECollection/ che contiene tute le versioni di ie più firebug e un debugger made in microsoft.
Non posso aiutarti perchè sono un linuxiano e non ho ie sul sistema.
Io ormai per ie ho deciso di perderci meno tempo possibile e integro css3pie dove serve.


Ci provo, come funziona la cosa? Tipo validatore "per IE" che ti segnala gli errori?

PM Quote
Avatar
Mte90 (Member)
Guru


Messaggi: 1144
Iscritto: 25/03/2008

Segnala al moderatore
Postato alle 19:49
Mercoledì, 09/03/2011
è un debugger come firebug.

PM Quote
Avatar
()
Newbie


Messaggi:
Iscritto:

Segnala al moderatore
Postato alle 9:21
Giovedì, 10/03/2011
Testo quotato
Postato originariamente da Mte90:

è un debugger come firebug.


Ho guardato nel link che mi hai dato e sembra ci sia una gran sfilza di versioni di IE
Scusa la mia ignoranza, ma cos'è firebug?

PM Quote
Pagine: [ 1 2 ] Precedente | Prossimo