¿Cambiar tipo de letra en las hojas de estilo?

[ekisdedede]

Hola amigos!

Acudo para que me echeis una mano, que me estoy volviendo loco con las hojas de estilo en dreamweaver!!!

Pues bien, tengo un html con un texto, quisiera cambiar el tipo de letra de ese texto...


Cuando desmarco la opción en dreamweavrer "Vista en vivo" me aparece con otro tipo de letra, vean:



Os dejo otro pantallazo de las hojas de stilo para que verifiquen conforme el tipo de letra que tengo es otra a la que aparece.



Otro dato importante, es que la primera frase del título, me la convierte en imagen; osea cuando lo leo en el explorador, y hago click derecho para copiar el texto, me lo abre como una imagen... esto a que se debe?

que hago mal?

Cualquier dato que me pidan os lo dejo!

Graciasa todos!!!

[KoswiDigital]

Hola.

Te recomiendo utilizar @font-face de CSS3 para añadir fuentes no estándares. (http://www.css3.info/preview/web-fonts-with-font-face/).


Un saludo.

[ekisdedede]

Iniciado por KoswiDigital

Hola.

Te recomiendo utilizar @font-face de CSS3 para añadir fuentes no estándares. (http://www.css3.info/preview/web-fonts-with-font-face/).


Un saludo.

Eso solucionaria mi problema? Como lo "instalo"? Perdona, soy muy novato en el tema...

Gracias!

[KoswiDigital]

Sí, lo solucionaría a grandes rasgos, ya que es la mejor manera de implementar fuentes no estándares y compatible con todos los navegadores.

Para hacer unas pruebas, te recomiendo http://www.fontsquirrel.com. Ahí podrás encontrar "@font-face kits" para muchos tipos de letra con licencias para uso comercial. Además, hay una utilidad para generar estos kits (@font-face generator), en la que tú añades tu fuente y el programa te devuelve el kit ya preparado y con el css, el cual sólo tendrás que implementar en tu hoja de estilos.

Creo que esa es la mejor manera de entender el funcionamiento de @font-face. Un ejemplo de uso:

Código CSS:

@font-face /* #logo */
{
    font-family: 'LaconicLight';
    src: url('fuentes/Laconic_Light-webfont.eot');
    src: url('fuentes/Laconic_Light-webfont.eot?iefix') format('eot'),
             url('fuentes/Laconic_Light-webfont.woff') format('woff'),
             url('fuentes/Laconic_Light-webfont.ttf') format('truetype'),
             url('fuentes/Laconic_Light-webfont.svg#LaconicLight') format('svg');
    font-weight: normal;
    font-style: normal;
}
 
#logo
    {
        font: 1.2em 'LaconicLight', Arial, sans-serif;
    }
 

En ese ejemplo tenemos 4 archivos con la fuente para evitar problemas de compatibilidad entre navegadores. Podrías utilizar sólo uno, pero la utilidad de fontsquirrel.com te genera los 4 y por eso es muy útil.

Échale un vistazo, en caso de duda aquí estamos.


Un saludo.

[ekisdedede]

Bufff... me lio con tantos codigos y tantos procesos:

1- El tipo de letra que yo quiero (que es Myriad) no me aparece en ese sitio.
2- Como lo implementaria? esque soy novato total! si añado eso de: @font-face y cambio el tipo de letra por la Myriad... ya me funciona???

Gracias por todo!!!

[KoswiDigital]

En realidad, para hacer pruebas, puedes utilizar cualquier tipo de fuente. Myriad es una fuente de Adobe y que yo sepa es para uso personal (en todo caso siempre puedes buscar la licencia y comprobarlo).

Si quieres utilizar esa fuente, utiliza el @font-face generator (http://www.fontsquirrel.com/fontface/generator). Le das a "Add Fonts", seleccionas la fuente, estableces la calidad en óptima, aceptas el acuerdo de licencia de uso y el resultado será un archivo comprimido con todas la fuente en los 4 formatos y el css para hacer un copy&paste.

Las fuentes, colócalas en donde tengas la hoja de estilos. Luego, para utilizar la fuente, en los párrafos, por ejemplo, puedes hacerlo de la siguiente manera desde el css:

Código CSS:

p { font: 1px 'Myriad', sans-serif; font-weight: bold; color: red; background: black; }
 

En 'Myriad', tendrás que poner (siempre entrecomillado) el nombre que aparezca en el @font-face (también aparecerá entrecomillado).


Prueba o busca ejemplos en google, seguro que hay muchos.

[ekisdedede]

vale, pero me dijiste que lo debo utilizar en css3, si tengo el archivo css... con pegar lo generado me funcionara? o tengo que crear un archivo dreamweaver especifico css3? o no tiene nada que ver una cosa con otra? perdona, pero antes de que no me funcione y me rompa la cabeza...

[KoswiDigital]

Descuida, te funcionará correctamente en la hoja de estilos que ya tienes creada.
Se pueden utilizar propiedades CSS3 y CSS2 conjuntamente en la misma hoja de estilos.

[ekisdedede]

Hola de nuevo!

tras varios intentos, e implantaciones...

He probado, pero fijate, el tipo de letra no cambia, sigue la anterior:
Aqui se muestra que lo implante en el css


aqui se ve como edito las etiquetas h1 h2 h3 h4 y h5


y aqui se ve que es la etiqueta h1 pero no cambia de tipo, sigue igual!

[KoswiDigital]

Desde luego, algo falla ahí. ¿Qué letra es la que aparece?, ¿de dónde la saca? ¿Los archivos de fuente están en la misma carpeta que la hoja de estilos? ¿En el explorador ocurre lo mismo que en la vista en vivo de dreamweaver (mejor es siempre hacer las comprobaciones en los navegadores)?

Además, sería bueno comprobar la hoja de estilos en busca de errores (http://jigsaw.w3.org/css-validator/#...i+with_options - Selecciona CSS3).

A ver si localizamos el problema y lo solucionamos. De seguro es algo sencillo.

[ekisdedede]

Hola de nuevo!

Pues entre ayer y hoy he intentado de todo! repase todos los errores, he cambiado la hoja de estilo por la qu eme establecio el programa, pero aun no consigo que funcione!!!

Sé que esto esta prohibido, pero seguro que entiendes tu mas del tema! Te subo el html para que lo revises, igual yo me saltado algun paso... http://www.megaupload.com/?d=YQQK7O4W

Cualquier cosa me avisas porfavor! Gracias!!!

[KoswiDigital]

Ok, ahora entiendo. No caí en la cuenta de que estás utilizando javascript para reemplazar las fuentes (cufon.js) cuando me dijiste que al arrastrar los textos se veían como imágenes. La fuente que se ve ahí y que nunca desaparece es "Titillium". Yendo directamente al archivo en cuestión, las últimas líneas de custom.js contienen lo siguiente:

Código Javascript:

/* jQuery Cufon Fonts -----------------------------------------------------------*/
 
Cufon.replace('h1, h2, h3, h4, h5, h6, p.simple,', { hover:true });
 

Lo que están haciendo esas líneas es que se reemplacen todos los elementos de encabezado y párrafos de clase "simple".


Borra esas líneas y utiliza la propiedad @font-face de nuevo en tu hoja de estilos, como te he explicado antes, y te funcionará correctamente. También puedes borrar la carpeta cufón y quitar las líneas de <script></script> que lo contengan en los html.

[ekisdedede]

bufff ya estoy casi casi! el proble ade la conversion de imagenes, ya lo he solucionado! ahora lo que me falta es cambiar la tipografia por la myriad!

La pagina que me has pasado anteriormente, la que genera un css d ela tipo, la he usado, he copiado, y luego la he pasado por el verificador de css (que fue el ultimo que me pasaste)

Pero no me funciona, en la web me dice que es un archivo css 2.1, y tu comentaste que el fon.face solo funciona con css3... me esplico? si vuelves a abrir el wood.css veras que efectivamente es una version anterior

me comentaste que no importava la version, pero no entiendo porque no funciona... otra vez hago algo mal? o esque no he editado alguna regla en .html?

gracias por todo! me salvas de unos dolorines de cabez.a.. bufff gracias de verdad :)

[KoswiDigital]

Jeje, nada hombre, no hay de qué. Para que no te líes mucho con las versiones de CSS, te explico: en tu hoja de estilos puedes meter propiedades tanto de CSS2 como CSS3, ya que este último también recoge las propiedades de CSS2. Más claro, CSS3 es igual a CSS2 más propiedades nuevas.

Siguiente punto. En el validador CSS eres tú quien indica la versión de CSS que estás utilizando. Entra de nuevo (http://jigsaw.w3.org/css-validator/#...i+with_options) y en Profile selecciona CSS level 3. Eso validará tu hoja de estilos satisfactoriamente, a menos que haya algún otro error o advertencia no relacionado con las fuentes.

Recuerda que además de utilizar el código CSS generado por FontSquirrel.com, deberás introducir los 4 archivos de fuente junto con la hoja de estilos (o en una carpeta e indicarlo en las rutas (src) del @font-face.

[ekisdedede]

hola de nuevo! gracias por tus respuestas tan rapidas posibles!

Pues estoy casi casi llegando al fin del problemilla!

Ya he entrelazado las fuentes, en una carpeta, y me las lee, pero cuando edito otro tipo de texto... solo me cambia un tipo, el otro me lo deja igual!

Mira te dejo un pantallazo para que veas como las tengo puestas en la hoja de estilos:



El título (que antes no podia cambiar) ya me lo cambia.. pero cuando edito el texto general... me lo cambia, pero el titulo no, me esplico?

Al editarla hago llamada de la fuente y edito la hoja que sale en el html.

Gracias otra vez mas, por molestarte bufff... si ya no se como agradecerte jeje

[KoswiDigital]

No es necesario que agradezcas, me gusta ayudar ;)

La verdad, no entiendo muy bien lo que dices, pero es posible que el fallo esté en que debes utilizar un @font-face por cada fuente que utilices.

Código CSS:

@font-face
{
  /*fuente 1*/
}
 
@font-face
{
  /*fuente 2*/
}
 

Prueba a ver y me comentas. Un saludo.

[ekisdedede]

Hola de nuevo!

Perdona por no responderte con anterioridad, pero aproveche para revisar otras dudas que tenia y asi hacertelas a ver si podrias ayudarme:

Una de ellas es: una imagen, como puedo dejar margen por arriba abajo y lados para tenerla entre el texto? (se entiende un poco) solo quiero dejar margen por arriba abajo y lado derecho!
El iziquierdo no, que la tengo de comienzo!

La otra es: un formulario de contacto con el titulo y opciones diferentes... es posible que si el usuario utiliza la opcion de "Averias" se le reedireccion con "[email protected]" y otro cliente que escoja la opcion de informacion, se le reedireccione a la direccion de: "[email protected]???

Gracias por todo! ya no se como agradecerte, pero bufff... la verdad me ayudaste mucho! gracias de verdad!

Gracias otra vez :)

[KoswiDigital]

una imagen, como puedo dejar margen por arriba abajo y lados para tenerla entre el texto?

Tienes que flotar la imagen al lado que desees y aplicarle margen, por ejemplo:

1) En la hoja de estilos:

Código CSS:

img.textos-izq
{
  float: left; /* con float lo que hacemos es "flotar el contenido", lo que quiere decir quitar dicho elemento del flujo habitual del documento (es más fácil de entender mirándolo que leyéndolo) */
 
  margin: 0 5px 5px 0; /* el método abreviado margin: utilizando los 4 valores, el orden es arriba,derecha,abajo,izquierda. Aquí le aplicamos 5px de margen a la derecha y abajo. También puedes utilizar 3 valores (arriba,derecha-izquierda,abajo), 2 valores (arriba-abajo,derecha-izquierda) o un sólo valor para los cuatro lados */
}
 

2) En el documento

Código HTML:

<div>
  <p>
    <img class="textos-izq" src="ruta/imagen.jpg" width="100" height="100" alt="imagen flotada a la izquierda" />
  </p>
</div>
 

Esto es un ejemplo, pero para que te hagas la idea creo que sirve. Podrías hacer lo mismo para flotar un elemento a la derecha... Y bueno, no tiene mucho más, sólo que puedes flotar todo tipo de elementos y, aunque no en nuestro caso, en ocasiones tendrás indicar que el flujo vuelva a la normalidad. Para esto se utilizaría la propiedad clear: (none[por defecto] right , left , both). Lo habitual y cómodo es utilizar both (que quiere decir ambos).

Esto te será útil cuando flotes un <div> y quieras que el siguiente no se apile con éste. Si te queda alguna duda, pregunta.

es posible que si el usuario utiliza la opcion de "Averias" se le reedireccion con "[email protected]" y otro cliente que escoja la opcion de informacion, se le reedireccione a la direccion de: "[email protected]

Los formularios envían la información a otro archivo que es el que trata los datos ingresados (desde el lado servidor). Este otro archivo será, probablemente, php.

Tanto si utilizas un sólo formulario con distintas opciones (modificables a través de javascript) o formularios distintos, siempre que sea el mismo archivo quien los procese no hay problema. En este archivo, una vez recogidos los datos, habrá que decirle algo como: "si el campo con nombre opcion es igual a "averias", lo mandas a este e-mail. Si es igual a información, a este otro".

Para esto te harían falta unos pequeños conocimientos de php. Pero en realidad esto es muy simple. Imagino que estamos hablando de un formulario de contacto y que se utiliza para, después de recoger los datos, enviar un e-mail.


No hay de qué. Espero no haberte liado mucho con las respuestas. Para solucionar lo del formulario habría que ver como está hecho tanto el <form> como el archivo php que recoge los datos.

Un saludo.

[ekisdedede]

Hola de nuevo, gracias por responderme con tanta rapidez!

Pues he probadoo lo que me has comentado del margin y float, pero tampoco funciona! Te dejo un pantallazo para que veas como lo tengo en las hojas de estilo!



Perdona por marearte y por hacerte revisar "burradas"!

[KoswiDigital]

Mea culpa. Cuando los valores son "0" no es necesario especificar la unidad de medida, si no sí hay que hacerlo:

margin: 100px 30px 5px 30px sería lo correcto.

Corrígelo, por lo que veo el resto parece estar bien. Te lo deberá de flotar a la izquierda tal y como le indicas.
Prueba y me comentas.

[ekisdedede]

nada, no lo consigo!

puede ser un tema con el html?



Pero aun asi tampoco lo cambia.. la opcion esta en integrar la foto con el texto para que me quede bien maquetado! (otra burradas mas..)

gracias por todo! no pude contestar antes que estado liado mirando esto toda la tarde... GRACIAS!

[KoswiDigital]

Ehm, ¿lo que veo ahí son encabezados dentro de un párrafo?

Veo esto:

Código HTML:

<p>
  <span></span>
  <h4></h4><span></span>
  <h2></h2>
  <p>
 

Eso no está nada bien, jeje. Puedes meter elementos de párrafo o encabezados dentro de un div, pero nunca unos dentro de otros, ya que son diferentes. Un encabezado siempre será un encabezado e irá arriba, genralmente marcará algo importante o será el título de una sección y, después, los párrafos con el texto.

Respecto a la imagen, veo que utilizas un preload en javascript. ¿La clase no debería de llevarla la propia imagen <img class="" src... />? No sé como lo tienes configurado pero lo fácil sería quitar ese <span> y poner las clases directamente en la imagen.

Siendo así, en la hoja de estilos, la clase .left sería la que indica que la imagen esté flotada a la izquierda y con los márgenes designados.

En la hoja de estilos que me enseñaste en el post anterior, le indicas que se flote la imagen (<img />) del elemento de lista (<li>) de una lista desordenada (<ul>) con clase "Author_list". Y en la captura de ahora veo que la imagen no está dentro de un elemento de lista.

Haz una prueba. En el html, ponlo de esta manera:

Código HTML:

<img class="prueba" src="images/portfolio.png" alt="Portfolio" width="92" height="72" />
 

Y en el CSS añades esta línea:

Código CSS:

.prueba
{
  float: left;
  margin: 100px 30px 5px; /* 100 arriba, 30 a cada lado y 5 abajo*/
}
 

Si es posible, como te dije, evita meter unos elementos dentro de otros. Mucha gente mete un <ul> dentro de un <div> para hacer un menú de navegación. Y generalmente no es necesario en absoluto, ya que un <ul> es un elemento de bloque al igual que un <div>, con la diferencia de que sólo puede contener elementos de lista, pero es para lo que se utiliza en ese caso.


Prueba lo que te he comentado a ver qué ocurre. Además, como ayuda, te dejo un par de enlaces:

Validador xhtml del w3c: http://validator.w3.org/#validate_by_url
Validador css del w3c: http://jigsaw.w3.org/css-validator/#...i+with_options

Ambos te serán muy útiles para no sólo validar tu código, si no comprobar que está correcto y sin errores de cierre, etiquetas mal anidadas o elementos que no deben estar dentro de otros elementos.


Vete probando. Cualquier duda, ya sabes, aquí estamos. Un saludo :D

[ekisdedede]

Hola! gracias, lo he onseguido!!!

Mientras seguia retocando, me surgieron otras dudas paralelas al css, que de este modo aprovecho para porponertelas a ti (siempre y cuando te parezca ideal, estes comodo, y puedas resolvermelas).

Van con el servidor; como puedo pasar de /inicio.html a /inicio ? Me han dicho que use el modrewrite de htaccess pero este solo pasa de .php a .html... y lo quie yo quiero es tener el sitio dinamicamente, sin tener que pasar por la extension .html, me esplico? Tambien me hablaron de poner los temas por carpetas... pero no me resulto! a ver si puedes ayudarme a resolver esta incognita..

Muchas gracias por todo! espero no abusar de tu ayuda! gracias de verdad :)

[KoswiDigital]

:)

Poner los temas por carpetas sería teniendo un index por cada sección y todas en carpetas, de esta manera:

camisetas/(index.html)
pantalones/(index.html)
contacto/(index.html)

Lo pongo entre paréntesis porque a un navegador no es necesario especificarle el index, valdría con poner sitio.com/camisetas y ya accedería al index.

La otra manera, como bien dices es el mod rewrite, y sí es posible con archivos html. Lo que hace esta herramienta es utilizar expresiones regulares, por lo que cualquier cambio en la ruta es posible. El problema es que yo nunca lo he utilizado, pero he estado mirando por ahí y creo que sería algo como esto (que alguien me corrija si no es así o la expresión está mal):

Código c&#243:

Options +FollowSymLinks
 
RewriteEngine on
RewriteBase /
RewriteRule ^/index(.*)$ /index.html
 

Esto debe ir en el htaccess, en el root. En esta página tienes ejemplos y definiciones acerca de esto.


Para lo que sea seguimos por aquí. Un saludo.

[ekisdedede]

He estado toqueteando con el servidor, y no hay manera!! el modrewirte no me lo lee, y lo de la carpeta con index.php... tampoco termino de ennderlo!!

a ver si me esplicas un poco mas detalladamete como se realiza este paso, la verdad no entnedi ni se como se hace!

gracias por tu tiempo, y dedicarlo coonmigo esplicandome estas "burradas" (para ti)

Un saludo!

[KoswiDigital]

Hola de nuevo.

Mejor, para lo del mod_rewrite es que abras otro tema y alguien con más conocimientos sobre eso te pueda ayudar.

Respecto a hacerlo de la otra manera, es simple. Imaginémonos esta estructura:

Índice del servidor:

index.html
camisetas/index.html
pantalones/index.html
sudaderas/index.html

En la barra de direcciones, sólo habría que poner www.tusitio.com/camisetas y listo. A ver si ahora me expliqué mejor :)


Saludos.

[ekisdedede]

No, no entendi... pero bueno, ya me lo mirare por otro lado, gracias!

Otro tema que he estado buscando es como traducir la pagina!

Pero no con un php, sino con un html que al darle a ingles se traduzca entera, imagenes y todo (lo haria manulamente) pero no de hacerlo automaticamente, me esplico?

gracias por todo!!!!

[KoswiDigital]

A ver.. Un ejemplo práctico.

Si entras en casabalea.com/la-casa será exactamente igual que si entras en casabalea.com/la-casa/index.php.

En lugar de casabalea.com/la-casa.php utilizamos una carpeta con un index dentro. A ver si ahora me expliqué mejor :)


Para la traducción... Realmente lo fácil sería utilizar php. Podrías hacerlo también con javascript pero si el navegador no lo soporta no habrá traducción posible.
También podrías crear 2 versiones de la página (tupagina.com/en/ y tupagina.com/es/), pero es más laborioso y sólo sirve para sitios muy pequeños, de poco contenido (si no te volverías loco).

En realidad, en un archivo, no importa mucho si la extensión es php o html, porque la mayor diferencia es que el archivo php soporta código php y el otro no. Yo siempre utilizo php, por si acaso tengo que echar mano de él, pero esto no quiere decir que siempre haya código php en mis archivos php. Espero explicarme ;)


Si te queda alguna duda... Aquí estamos.


Saludos.