Visualizzazione dei risultati da 1 a 10 su 10
  1. #1
    Utente di HTML.it L'avatar di Veronica80
    Registrato dal
    May 2006
    Messaggi
    2,083

    Inserire font in un file SVG

    Ciao a tutti,
    sto cercando di includere un font dentro un file SVG usando questo codice:


    codice:
        <defs>        <style>
    			.cls-1{
                    isolation:isolate;
    				font-size:47px;
                    font-family: "Renaissance-Regular, Renaissance";
                    src: url('fonts\renaissance\renaissance-webfont.woff');
                }
                .cls-1, .cls-2{
                    fill:#fff;
                }
                .cls-3{
                    fill:none;
                }
                .cls-4{
                    fill:#f6f6f6;
                }
            </style>
              
        </defs>
    Però l'immagine continua ad avere il font base.

    Se in locale però installo il font .TFF allora riesco a vedere la scritta col font corretto.
    Dacchè l'immagine andrà su web come posso risolvere?
    Cosa sto sbagliando?

    Grazie!

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,311
    Ciao, personalmente non ho molta esperienza riguardo le definizioni per svg ma vedo qualcosa che stona:

    1 - nel path dentro url() stai usando il backslash (\), dovresti invece usare il normale slash (/). Verifica inoltre che il percorso sia esatto e punti correttamente a quel file woff.

    2 - non dovresti usare la regola @font-face per includere il font in quel modo?
    Hai già provato Forum HTML.it Toolset?
    uno script che ottimizza il layout e le funzionalità del Forum

  3. #3
    Amministratore L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    20,458
    Quote Originariamente inviata da Veronica80 Visualizza il messaggio
    codice:
       
    src: url('fonts\renaissance\renaissance-webfont.woff');
    Se in locale però installo il font .TF allora riesco a vedere la scritta col font corretto.
    Dacchè l'immagine andrà su web come posso risolvere?
    la risposta sta nella domanda stessa: metti il percorso verso il server che fornirà il font.

  4. #4
    Utente di HTML.it L'avatar di Veronica80
    Registrato dal
    May 2006
    Messaggi
    2,083
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio
    Ciao, personalmente non ho molta esperienza riguardo le definizioni per svg ma vedo qualcosa che stona:

    1 - nel path dentro url() stai usando il backslash (\), dovresti invece usare il normale slash (/). Verifica inoltre che il percorso sia esatto e punti correttamente a quel file woff.

    2 - non dovresti usare la regola @font-face per includere il font in quel modo?

    1) Ho provveduto a invertire gli slash ma nulla...
    2) Si teoricamente si ma a me servirebbe la classe per avere quel font solo in un punto della SVG...Ho provato anche con @font-face ma niente...

    ps: ho anche aggiunto format("woff") dopo l'URI.

  5. #5
    Utente di HTML.it L'avatar di Veronica80
    Registrato dal
    May 2006
    Messaggi
    2,083
    Quote Originariamente inviata da Vincent.Zeno Visualizza il messaggio
    la risposta sta nella domanda stessa: metti il percorso verso il server che fornirà il font.
    Il percorso è relativo...quindi sia in locale che sul web è sempre lo stesso

  6. #6
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,311
    Si teoricamente si ma a me servirebbe la classe per avere quel font solo in un punto della SVG...Ho provato anche con @font-face ma niente...
    Potrei sbagliarmi ma a prescindere dalle classi, penso che il font vada comunque incluso sul documento, per cui puoi farlo attraverso il @font-face. A quel punto puoi applicare tale font per qualsiasi selettore (quindi la tua classe) semplicemente definendo la proprietà font-family.

    Inoltre ho l'impressione che le virgolette, attorno alla serie di valori in font-family, siano di troppo.

    Potrebbe essere una cosa del genere:

    codice HTML:
    <style>
    @font-face {
       font-family: Renaissance-Regular, Renaissance;
       src: url('fonts/renaissance/renaissance-webfont.woff');
    }
    .cls-1{
       isolation:isolate;
       font-size: 47px;
       font-family: Renaissance-Regular, Renaissance;
     }
    /* ... */
    </style>
    Ancora, il percorso relativo fa riferimento alla posizione del file svg, controlla quindi che da quella posizione sia esatto per raggiungere il file woff.
    Hai già provato Forum HTML.it Toolset?
    uno script che ottimizza il layout e le funzionalità del Forum

  7. #7
    Utente di HTML.it L'avatar di Veronica80
    Registrato dal
    May 2006
    Messaggi
    2,083
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio
    Potrei sbagliarmi ma a prescindere dalle classi, penso che il font vada comunque incluso sul documento, per cui puoi farlo attraverso il @font-face. A quel punto puoi applicare tale font per qualsiasi selettore (quindi la tua classe) semplicemente definendo la proprietà font-family.

    Inoltre ho l'impressione che le virgolette, attorno alla serie di valori in font-family, siano di troppo.

    Potrebbe essere una cosa del genere:



    Ancora, il percorso relativo fa riferimento alla posizione del file svg, controlla quindi che da quella posizione sia esatto per raggiungere il file woff.
    Grazie Killer!!!! Mi hai dato l'imbeccata giusta! Allora...ho ricreato il webfont (in tff però e su base64) ed ho incluso così:

    codice:
                @font-face {                font-family: 'renaissance_regular';
                    src: url('fonts/renaissance-webfont.eot');
                    src: url('fonts/renaissance-webfont.eot?#iefix') format('embedded-opentype'),
                     url('fonts/renaissance-webfont.ttf') format('truetype'),
                     url('fonts/renaissance-webfont.svg#renaissance_regular') format('svg');
                    font-weight: normal;
                    font-style: normal;
                }
    
    
        
                .cls-1{
                    isolation:isolate;
                    font-size:47px;    
                    font-family:"renaissance_regular";            
                }
    ora se apro (col browser) il mio SVG me lo da col font!

    Il problema è che il file SVG è un logo della homepage (index.php) del sito, e quando lo visualizzo sul sito (quindi senza eseguirlo direttamente) il problema ritorna...ho pensato che essendo in index.php magari dovevo correggere i percorsi in modo che il ROOT fosse appunto index.php...ma nulla...
    Sento che son a un passo dalla soluzione ma non la vedo!

  8. #8
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,311
    Non so, dovrei vedere la pagina in azione per poter capire.
    Posta un link se ti è possibile.

    In alternativa potresti impostare il percorso apponendo uno slash iniziale che farà riferimento alla root:
    codice:
    '/fonts/renaissance-webfont.ttf'
    in questo modo il percorso è sempre relativo ma parte dal livello principale (la root del tuo spazio web)
    Per cui il file si troverà in
    codice:
    'https://tuosito.foo/fonts/renaissance-webfont.ttf'
    Hai già provato Forum HTML.it Toolset?
    uno script che ottimizza il layout e le funzionalità del Forum

  9. #9
    Utente di HTML.it L'avatar di Veronica80
    Registrato dal
    May 2006
    Messaggi
    2,083
    Niente...non va

    Ho provato a creare una pagina html di prova con un semplice tag <img>, mettendo tutto nella stessa cartella.

    codice HTML:
    <img src="logo-default.svg" /><a href="logo-default.svg" target="_blank">Clicca qui</a>
    Il tag <img> mi visualizza l'immagine senza font se invece clicco il link (ed apro direttamente l'immagine) me lo visualizza...

    A sto punto non credo sia un prolema di percorsi (essendo tutto nella stessa cartella)...

  10. #10
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,311
    A sto punto non credo sia un prolema di percorsi (essendo tutto nella stessa cartella)...
    bene, almeno puoi escludere questa causa.

    Potrebbe dipendere da qualche restrizione di sicurezza del browser che ne impedisce il caricamento.
    Tu hai provato a testarlo su diversi browser?

    Io non saprei dirti di più se non posso testare la pagina personalmente.
    Ripeto: puoi postare un link di un esempio online?


    Domanda: stai includendo il font solo per il logo? In tal caso non sarebbe più semplice convertirlo in vettoriale per ottenerne direttamente un svg, senza quindi richiamare risorse esterne?
    Hai già provato Forum HTML.it Toolset?
    uno script che ottimizza il layout e le funzionalità del 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 © 2022 vBulletin Solutions, Inc. All rights reserved.