Problema con @font-face y directorios

[Gambinoh]

Mi problema es muy sencillo y claro.

Estoy construyendo una web, tiene 180 archivos html que en principio están sueltos en el directorio raíz, las imagenes en una carpeta llamada imagenes, las fuentes en una carpeta llamada fuentes y la hoja de estilos en una carpeta llamada css. Hasta ahí todo bien.

Entre los estilos que aplico a mis páginas html está la regla @font-face, que aplico sin problemas en ie, firefox, opera, etc. la uso para importar un tipo de letra que no está por defecto ni en guindous ni en linux. La cosa es que enlazo la hoja de estilos a las demás páginas y archivos tal que así: <link rel="STYLESHEET" type="text/css" href="css/estilo.css"> haciendo eso todos los estilos se aplican correctamente a todas las páginas.

Sin embargo como es una barbaridad tener 180 páginas sueltas en el directorio raíz se me ocurrió meterlas en carpetas organizandolas por secciones y contenidos. Pues resulta que al hacerlo he de modificar el link y tras hacerlo se aplican todas las imágenes y todos los estilos, pero la maldita regla @font-face no se aplica y me jode un montón.

¿Qué puedo estar haciendo mal?

Este es mi código para enlazar los estilos con @font-face que funciona con los html en el directorio raíz: @font-face {font-family: 'estilo'; src: url('../fuentes/estilo.eot'); font-weight: normal; font-style: normal;}

@font-face {font-family: 'estilo'; src: url('../fuentes/estilo.ttf') format('truetype'); font-weight: normal; font-style: normal;}

[mlombardo70]

http://www.fontsquirrel.com/fontface/generator

Sube la fuente ahí y te generará un pack con el css y una demo, simplemente sube el css y las fonts del pack manteniendo la estructura de carpetas y podrás usar el font family con la font customizada aunque el cliente no la tenga instalada en su máquina. Es compatible con IE, FF, Chrome, etc... incluso dispositivos móviles como iphone y otros

Saludos

[kseso?]

Por lo que expone, se deduce que tanto la regla @font-face como los archivos de fuentes, las declaraciones y todo lo relativo están bien construidos.
El problema creo que es de rutas.
Antes sí aplicaba y tras la reorganización no.

Supongo que sabe que para las rutas incluidas en el archivo css toman como origen al propio archivo css, no a la página html.

Si sólo cambió la ubicación de los archivos html (y no los css) sólo debería tener que cambiar la ruta de llamada a los archivos css.

Declara su ruta al archivo de la fuente así:

url('../fuentes/estilo.ttf')

Con lo que debería tener su estructura de carpetas así:

--Carpeta css/archivos css
--Carpeta fuentes/archivos fuentes

Si lo tiene en línea, ponga el enlace para verlo in situ.

[opentags]

Iniciado por Gambinoh

Mi problema es muy sencillo y claro.

Estoy construyendo una web, tiene 180 archivos html que en principio están sueltos en el directorio raíz, las imagenes en una carpeta llamada imagenes, las fuentes en una carpeta llamada fuentes y la hoja de estilos en una carpeta llamada css. Hasta ahí todo bien.

Entre los estilos que aplico a mis páginas html está la regla @font-face, que aplico sin problemas en ie, firefox, opera, etc. la uso para importar un tipo de letra que no está por defecto ni en guindous ni en linux. La cosa es que enlazo la hoja de estilos a las demás páginas y archivos tal que así: <link rel="STYLESHEET" type="text/css" href="css/estilo.css"> haciendo eso todos los estilos se aplican correctamente a todas las páginas.

Sin embargo como es una barbaridad tener 180 páginas sueltas en el directorio raíz se me ocurrió meterlas en carpetas organizandolas por secciones y contenidos. Pues resulta que al hacerlo he de modificar el link y tras hacerlo se aplican todas las imágenes y todos los estilos, pero la maldita regla @font-face no se aplica y me jode un montón.

¿Qué puedo estar haciendo mal?

Este es mi código para enlazar los estilos con @font-face que funciona con los html en el directorio raíz: @font-face {font-family: 'estilo'; src: url('../fuentes/estilo.eot'); font-weight: normal; font-style: normal;}

@font-face {font-family: 'estilo'; src: url('../fuentes/estilo.ttf') format('truetype'); font-weight: normal; font-style: normal;}

Use rutas absolutas

[Gambinoh]

Como dice kseso? la estructura actual de mi directorio es así:

--carpeta raíz/carpeta css/archivos css
--carpeta raíz/carpeta fuentes/archivos fuentes
--carpeta raíz/carpeta imagenes/archivos imagen
--carpeta raíz/archivos html

Se que si el archivo css no está en el mismo directorio raíz, hay que subir un directorio para enlazar a la hoja de estilos un archivo, como podría ser por ejemplo una imagen.

O sea como ya he dicho antes si quiero colocar de background en el div que hace de cabecera una imagen escribiría en la hoja de estilos:

.cabecera {background: white src("../carpeta imagenes/archivo imagen") no-repeat left;}

Y en el código html sencillamente:

<div class="cabecera"></div>


Si el problema es de rutas entonces hasta ahora nadie lo ha visto, de hecho a mi mismo me parece que la ruta está bién. Sin embargo yo me bajé un kit con la fuente en eot, ttf y woff de http://www.fontsquirrel.com, así que probaré a bajarmelo de nuevo y si eso pruebo a linkear los estilos con el @font-face autogenerado allí y ya os cuento.

[Gambinoh]

Iniciado por opentags

Use rutas absolutas

Esto rutas absolutas en local ¿no sería diferente que en la web?

Me refiero a que en mi ordenador en local mi carpeta raíz se llama web.

¿Luego una ruta absoluta para los estilos sería así: href="/web/fuentes/estilo.ttf"?

[kseso?]

¿está trabando en local?
Ese dato es importante, pues he observado que tras una de las últimas actualizaciones de FF (no se si trabajas con ese explorador) ya no reconoce la regla @font-face en local.
Sin embargo no hay problemas de visualización del mismo código si es a través de un servidor.
Da lo mismo que sea en externo (internet) o en localhost.

[Gambinoh]

Iniciado por kseso?

¿está trabando en local?
Ese dato es importante, pues he observado que tras una de las últimas actualizaciones de FF (no se si trabajas con ese explorador) ya no reconoce la regla @font-face en local.
Sin embargo no hay problemas de visualización del mismo código si es a través de un servidor.
Da lo mismo que sea en externo (internet) o en localhost.

Vaya, pues sí, estoy trabajando en local con FF en Linux. No quiere decir que no pase la web por IE, Opera, FF, Chrome y toda la pesca, pero habitualmente diseño en texto plano y comprobando con FF y luego ya pulo los detalles (casi nunca encuentro diferencias).

Joder pues que putada, porque entonces todo tendría explicación.

Que pesadilla que son los diferentes navegadores...

[Gambinoh]

kseso? ya que te has molestado en aclararme las cosas como veo que entiendes más que yo me gustaría pedirte un par de consejos.

Como ya te he dicho tengo unos 180 archivos html y en aumento con lo cual es un poco putada buscar cada página. Como ahora ya se que es cosa de FF en local y que puedo meter en carpetas los diferentes html según temática (con lo cual para encontrar los archivos html y editarlos lo tendría más fácil) ¿Ves algún inconveniente en ello?

Manejo una sola hoja de estilos que está bastante pulida y validada, aunque es larga. He pensado que es preferible usar una hoja de estilo a varias. Como caso extremo, cuando adecue la página a ie6 y versiones antiguas de otros navegadores tengo pensado añadir una hoja de estilos css +, o sea que al final como mucho tendría dos hojas de estilo. ¿Te parece buena idea usar una sola hoja o dos como máximo?

También me planteo si usar \9 y algún truquillo para ie si la cosa no cuadra en los últimos detalles finales. ¿Mejor eso que las condicionales u otra hoja de estilo a parte?

Ah y como detalle final (es que no me hacen mucho caso en esta página y por una vez que me responden jaja) necesito incorporar un buscador interno.

Anteriormente use para una pagina pequeña un buscador en JS que se llamaba "Tipue" pero no vale para webs con + de 150 páginas. ¿Sabes donde me puedo bajar el código ya montado PHP + mysql + xhtml? no tengo mucha idea, lo maximo que hice en PHP fue un formulario de contacto y en plan copy/paste.

[Portgaz]

tambien si no quieres hacer tantos rollos y no te quieres complicar la vida con rutas y mas rutas.
tendras que quemar mas espacio y mas ancho en tu host.

ponlos directos, ejemplos.

Si antes tenias archivos asi:

ROOT//index.html
ROOT//estilo.css
ROOT//index2.html
ROOT//index3.html

llamabas la hoja de estilos simplemente asi:
href="estilo.css"

y ahora tienes algo asi (ya que acomodaste los html)
ROOT//index.html
ROOT//estilo.css
ROOT//SECCION/index.html
ROOT//SECCIO2/index.html

es ves de acomodar las rutas pagina por pagina
Pega en todas tus secciones el archivo estilo.css

de tal manera que quede asi:

ROOT//index.html
ROOT//estilo.css
ROOT//SECCION/estilo.css
ROOT//SECCION/index.html

ROOT//SECCION2/estilo.css
ROOT//SECCIO2/index.html


y asi los llamara sin tener que modificar las rutas de llamada.

Saludos

[Gambinoh]

Iniciado por Portgaz

tambien si no quieres hacer tantos rollos y no te quieres complicar la vida con rutas y mas rutas.
tendras que quemar mas espacio y mas ancho en tu host.

ponlos directos, ejemplos.

Si antes tenias archivos asi:

ROOT//index.html
ROOT//estilo.css
ROOT//index2.html
ROOT//index3.html

llamabas la hoja de estilos simplemente asi:
href="estilo.css"

y ahora tienes algo asi (ya que acomodaste los html)
ROOT//index.html
ROOT//estilo.css
ROOT//SECCION/index.html
ROOT//SECCIO2/index.html

es ves de acomodar las rutas pagina por pagina
Pega en todas tus secciones el archivo estilo.css

de tal manera que quede asi:

ROOT//index.html
ROOT//estilo.css
ROOT//SECCION/estilo.css
ROOT//SECCION/index.html

ROOT//SECCION2/estilo.css
ROOT//SECCIO2/index.html


y asi los llamara sin tener que modificar las rutas de llamada.

Saludos

Disculpa es que no te he entendido muy bien. Creo que me dices que ponga en cada carpeta una copia de la hoja de estilos y que la enlace simplemente. Sí, eso lo pensé, aunque ahora optaré por clasificarlo todo en carpetas ya que como me han dicho sólo pasa en local con Firefox que no se aplica @font-face.

Por cierto si ves mi hoja de estilos te quedas en plan WTF y lo digo en serio. No es gran cosa porque la he diseñado para que la pagina pueda crecer de forma exponencial con un mantenimiento bajo. Pero en serio que para lo que tengo es fuerte la complejidad del código css y se ve igual en todos los navegadores xD.

[Portgaz]

bueno simplemente te daba una alternativa, de poner copias de la hoja en todas las carpetas
(SI LO ENTENDISTE), exactamente eso trate de decir.

te sugeria esto por que decias que no querias tanto rollo.
Pero igual, pagina por pagina puedes ir cambiando la ruta de llamada para que la hoja sea llamada desde un mismo lugar

saludos

[kseso?]

Portgaz:
se acaba usted de cargar toda la razón de ser de las hojas de estilo. Sin hablar de incremento de tráfico, hacer el mantenimiento imposible y quinientas mil cosas más.
Respuesta totalmente reprobable y carente de sentido.
Hágase un favor, pida a los moderadores que la borren (también del quote de Gambinoh.

kseso? ya que te has molestado en aclararme las cosas como veo que entiendes más que yo me gustaría pedirte un par de consejos.

No es aconsejable encadenar distintas y totalmente diferentes dudas en un mismo tema. Para quien lo hace. Pues habrá usuarios del foro que ya hayan creído respondida la duda inicial y no entren más al tema, privándose de su ayuda.

Como ya te he dicho tengo unos 180 archivos html y en aumento con lo cual es un poco putada buscar cada página. Como ahora ya se que es cosa de FF en local y que puedo meter en carpetas los diferentes html según temática (con lo cual para encontrar los archivos html y editarlos lo tendría más fácil) ¿Ves algún inconveniente en ello?

El inconveniente creo que es de planteamiento inicial. Si son 180 archivos html generados manualmente, debería haberse planteado el uso de algún lenguaje de programación, o incluso de algún prefabricado (cms) tipo wordpress, joomla... o alguna de las muchas alternativas que hay.

Manejo una sola hoja de estilos que está bastante pulida y validada, aunque es larga. He pensado que es preferible usar una hoja de estilo a varias. Como caso extremo, cuando adecue la página a ie6 y versiones antiguas de otros navegadores tengo pensado añadir una hoja de estilos css +, o sea que al final como mucho tendría dos hojas de estilo. ¿Te parece buena idea usar una sola hoja o dos como máximo?

También me planteo si usar \9 y algún truquillo para ie si la cosa no cuadra en los últimos detalles finales. ¿Mejor eso que las condicionales u otra hoja de estilo a parte?

Si aplica prácticamente todo el css a cada una de las páginas, es lo correcto, sólo un archivo. Mejor una llamada y cargar los Xkb que 2 llamadas de x/2kb
Y sí, si necesita alguna cosilla para corregir algo en ie en un archivo distinto y llamarlo con un comentario condicional.

Ah y como detalle final (es que no me hacen mucho caso en esta página y por una vez que me responden jaja) necesito incorporar un buscador interno.

Veo que eso es incierto. En los 4 temas creados por usted, sólo en uno no le han respondido. Otra cosa es que no haya encontrado la respuesta que esperaba. Piense si acoso podría mejorar algo la pregunta (más concretas, más precisas, con los datos precisos...)

Anteriormente use para una pagina pequeña un buscador en JS que se llamaba "Tipue" pero no vale para webs con + de 150 páginas. ¿Sabes donde me puedo bajar el código ya montado PHP + mysql + xhtml? no tengo mucha idea, lo maximo que hice en PHP fue un formulario de contacto y en plan copy/paste.

Enlaza con lo que le dije previamente. Esta consulta no tiene nada que ver con el foro de css. Y no es que no quiera ayudarle (supongo que no tiene dudas al respecto), sino que no tengo ni idea al respecto.

[Gambinoh]

El inconveniente creo que es de planteamiento inicial. Si son 180 archivos html generados manualmente, debería haberse planteado el uso de algún lenguaje de programación, o incluso de algún prefabricado (cms) tipo wordpress, joomla... o alguna de las muchas[URL="http://designshack.co.uk/articles/software/50-cms-alternatives-to-wordpress"] alternativas que hay[/URL].

En todo lo anterior que no he citado de tu comentario anterior creo que tienes razón y estoy de acuerdo, me has aclarado todas las dudas. Y agradezco que me respondas. Sin embargo estoy confuso con respecto a lo que cito de tu respuesta.

Digamos que mi pagina tiene una sección A), otra B), otra C), otra D) y otra E). Todas ellas menos E) son una única hoja html, en cambio E) se repite hasta llegar a las 180 hojas html.

Si se trata de una cuestión de arquitectura html las variaciones en la llamada hoja E) son simplemente un incremento de uno o + de estos: "<div class="x"><div class="y"></div></div>".

Para mi no hay problema en copiar y pegar la página E), renombrarla y añadir con copy/past "<div class="x"><div class="y"></div></div>" y luego darle su contenido en forma de texto (el contenido textual es diferente en cada "<div class="x"><div class="y"></div></div>" añadido).

Pero me gustaría saber si al hacer eso gano o pierdo algo ¿qué sería exactamente? Yo suponía que a la hora de que mis páginas estuvieran indexadas en un motor de búsqueda, dado el funcionamiento de los spiders o como se llamen me beneficiaba tener varias páginas html. Tampoco sé si eso me hace perder velocidad de carga, suponía que no tendría porqué ser así.

Pensé que el hecho de autogenerar contenidos distintos contenidos en div's era lo propio de un buscador interno tipo PHP y ese debería ser su uso exclusivo.

[Edito]

Según wikipedia un CMS (sistema de gestión de contenidos) funciona de la siguiente manera:

Un sistema de administración de contenido siempre funciona en el servidor web en el que esté alojado el portal. El acceso al gestor se realiza generalmente a través del navegador web, y se puede requerir el uso de FTP para subir contenido.

Cuando un usuario accede a una URL, se ejecuta en el servidor esa llamada, se selecciona el esquema gráfico y se introducen los datos que correspondan de la base de datos. La página se genera dinámicamente para ese usuario, el código HTML final se genera en esa llamada. Normalmente se predefine en el gestor varios formatos de presentación de contenido para darle la flexibilidad a la hora de crear nuevos apartados e informaciones.

Me pregunto si el hecho de seleccionar el esquema gráfico asociado a una url + generar dinámicamente la página + cargarla en el navegador no será más lento que directamente cargar la página ya generada. Teniendo en cuenta que la pérdida de espacio que supone el código html es mínimo y que esa pérdida de tiempo en generar una html de forma dinámica yo ya la estaría realizando en la página dedicada el buscador interno.

[Portgaz]

Iniciado por kseso?

Portgaz:
se acaba usted de cargar toda la razón de ser de las hojas de estilo. Sin hablar de incremento de tráfico, hacer el mantenimiento imposible y quinientas mil cosas más.

Jamas me ha agradado que nombren mi nick en publicaciones.
Y otra cosa es, que solo trataba de dar una solucion de acuerdo a él, ya que decia que no queria "tanto rollo".

Y el ser una cosa reprobable, es cuestion de si uno quiere utilizarlo o no, independientemente de las consecuencias.
Por que cada uno es responsable de sus actividades, y si esto incrementa,pues yo se lo adverti, creo que solo me citaste para presumir, pues yo se que mi respuesta no es exitosa y 100% favorable, y por dichos motivos le aclaré las consecuencias.

Asi que no me vuelvas a nombrar porfavor.
Y si citaras algo mio, hazlo sin mencionar mi nick

P.D: creo que hay quienes si les aprobaria nombrar mi nick, pero en tu caso es diferente

[alexk]

wow.... lo que hay que leer...

Iniciado por Portgaz

Jamas me ha agradado que nombren mi nick en publicaciones.

ok ok, no usaremos tu nombre en vano, vale otro mandamiento que debamos saber?, digo, así para no cometer errores en el futuro

Iniciado por Portgaz

Y el ser una cosa reprobable, es cuestion de si uno quiere utilizarlo o no, independientemente de las consuecuencias.
Por que cada uno es responsable de sus actividades, y si esto incrementa,pues yo se lo adverti,

nop, recordemos que el foro lo visita mucha gente, y si en verdad queremos ayudar, que sea eso, AYUDAR, si sabes que es incorrecta tu alternativa es mejor no decirla, para evitar esto, o bien si no estas seguro de que sea lo mas óptimo, pues dilo y ya, lo importante es ayudar.

Iniciado por Portgaz

creo que solo me citaste para presumir

presumir que?... el único engreído aquí eres tu que no podemos usar tu nick para citarte

Iniciado por Portgaz

Asi que no me vuelvas a nombrar porfavor.
Y si citaras algo mio, hazlo sin mencionar mi nick
P.D: creo que hay quienres si les aprobaria nombrar mi nick, pero en tu caso es diferente

No tengo palabras para esto, solo puedo decir que pienses muy bien lo que escribes, antes de responder con semejantes palabras.

Todos nos equivocamos, pero pocos lo reconocemos... por muy experto que se sea, hay veces que se cometen errores es lo mas normal, pero venir a decir esto ufff... piensalo

seguro fue un desliz, y no lo que piensas en realidad, tambien pasa ojala, lo entiendas

PD: te cito pero no pido perdon, que me encanta pecar XD .

[jomaruro]

Hola:

Iniciado por alexk

Todos nos equivocamos, pero pocos lo reconocemos...

Saludos.

[Gambinoh]

Le agradezco a kseso? sus comentarios ya que han sido muy acertados. De hecho he estado leyendo el tutorial de PHP de foros del web y lo cierto es que ya estoy pudiendo generar dinámicamente la página que antes he denominado E).

Agradezco desde aquí todos los comentarios, fueran afortunados o no y sobre todo a foros del web por su tutorial de PHP.

Eso es todo. Un saludo a jomaruro que veo que es un colaborador habitual y alguna que otra vez me ha servido su ayuda aunque fuera dirigida a otros.

Un saludo y gracias por resolverme mis dudas.

[kseso?]

Gambinoh:
A eso me refería. A generar bajo demanda la presentación del contenido de esas páginas. Contenido que lógicamente deberá tener ya creado y guardado.

Portgaz: <- cita consciente
¿algún otro deseo u orden? Aproveche, que llega Papá Noel.

[Portgaz]

Iniciado por Alexk

o bien si no estas seguro de que sea lo mas óptimo, pues dilo y ya, lo importante es ayudar.

El por ahi decia, que no queria tantos rollos (lo vuelvo a repetir)
Y es por eso que opté por esta respuesta, y tu dices:
"si no estas seguro que sea lo mas optimo, pues diloy ya"
Eso fue lo que hice

P.D: Cualquiera puede nombrar mi Nick, a excepcion de uno.

Acompletare...

No me agrada que gente que no me cae ni en la astilla publique mi nombre
Queda mas complejo, no!!?
Saludos

[kseso?]

Alex, Jomaruro:
Déjenlo. Donde no hay no sirve buscar.

Portgaz: <- cita consciente
Vamos a ver si soy capaz de hacerle ver la burrada que sugirió:
Una vez aclarado por Gambinoh que no era un problema de rutas al css o a los archivos enlazados desde el css y que sólo estaba afectando a los archivos de las fuentes tipográficas y que dicho malfuncionamiento se producía en firefox usted va y suelta la siguiente perla:

Que cree tantas copias del archivo css como documentos html tenga. Y en cada uno de los html enlace una copia del css.

¿Lo pilla? Más alto sí puedo, más claro, imposible.

Y ya que veo que lo que le anda escociendo fue que calificase de reprobable su respuesta y como es tan amigo de citar las definiciones del DRAE para ir metiendo la gamba en temas que ni le van ni le viene, aquí la tiene:

reprobar.

(Del lat. reprobāre).
1. tr. No aprobar, dar por malo.
MORF. conjug. c. contar.
Real Academia Española © Todos los derechos reservados

¿Tiene alguna duda de que su respuesta desaprobada y dada por mala por mi, por Gambinoh y por usted mismo posteriormente pueda y deba ser calificada de reprobable para que futuros visitantes de este hilo en situación parecida no se lleven a engaño y realicen una mala práxis?

Pues eso.
Y deje ya de ir lloriqueando porque le cite o no le cite. Que a los foros, como a la vida misma, se entra llorado de casa.