Tema: Incrustar tipografía en CSS
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 12/02/2014, 07:36
jrtorvisco
 
Fecha de Ingreso: noviembre-2013
Mensajes: 23
Antigüedad: 11 años, 1 mes
Puntos: 0
Pregunta Incrustar tipografía en CSS
Hola a todos, en primer lugar quiero decir que soy bastante inexperto en esto del CSS, soy Diseñador gráfico puro y duro, pero me veo en estos problemas de vez en cuando. Al grano, quiero incluir la tipografía Helvética 35 Thin en mi site. Para ello realicé una Prueba de un simple tutorial el cual funciona perfectamente: una carpeta llamada "fonts" con la tipografía dentro, un archivo CSS con este código:

Código CSS: 
Ver original
  1. @font-face {
  2.     font-family:helvetica35;
  3.     src:url(fonts/helvetica35.ttf)    
  4. }
  5.  
  6. h1 {
  7. font-family:helvetica35;
  8. }

En este Html:

Código HTML: 
Ver original
  1. <html>
  2. <head>
  3.  
  4.     <title> Prueba con @font-face</title>
  5.         <link rel="stylesheet" type="text/css" href="fonts.css">
  6.     
  7. </head>
  8. <body>
  9.  
  10. <h1> PRUEBA CON HELVETICA THIN</h1>
  11.  
  12. </body>
  13. </html>

El resultado es totalmente satisfactorio y pensé que ya había dado con la solución.

Al intentarlo en una plantilla web de Flash más compleja, hay un CSS que enlaza a un XML y el resultado es en un ShockwaveFlash, y no logro realizarlo, parece como si no me encontrase la tipografía y pone la que tiene por defecto. Ha llegado un punto en que no se seguir y estoy bastante frustrado.

El CSS es este código y se llama; flashmo_210_style :

Código CSS: 
Ver original
  1. @font-face {
  2.     font-family:helvetica35;
  3.     src:url(fonts/helvetica35.ttf)
  4.        
  5. }
  6.  
  7. p {
  8.     font-family:helvetica35;
  9.     font-size: 12px;
  10.     color: #FFFFFF;
  11. }
  12.  
  13. a {
  14.     color: #CCFF00;
  15.     text-decoration: underline;
  16. }
  17.  
  18. a:hover {
  19.     color: #FF6633;
  20.     text-decoration: none;
  21. }
  22.  
  23. .title {
  24.     font-family:helvetica35;
  25.     font-size: 30px;
  26.     color: #FFFFFF;
  27. }
  28.  
  29. .subtitle {
  30.     font-family:helvetica35;
  31.     font-size: 18px;
  32.     color: #FFCC00;
  33. }
  34.  
  35. .highlight {
  36.     color: #CC99FF;
  37. }
  38.  
  39. .note {
  40.     font-family:helvetica35;
  41.     font-size: 11px;
  42.     color: #BBBBBB;
  43. }

Creo que sencillo, pero no se..., sólo añadí el @font-face y cambié en los estilos el Font-Family sustituyendo Arial, Verdana, etc por el nombre. El XML es el siguiente código y se llama; flashmo_259_photo_list:

Código XML: 
Ver original
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <photos>
  3.  
  4.     <config
  5.         folder="photos/"
  6.         show_tooltip="true"
  7.         auto_play="true"
  8.         auto_play_button="true"
  9.         auto_play_duration="5"
  10.         
  11.         thumbnail_area_width="710"
  12.         thumbnail_height="100"
  13.         thumbnail_spacing="10"
  14.         thumbnail_border_size="5"
  15.         thumbnail_border_color="#EEEEEE"
  16.         thumbnail_highlight_color="#333333"
  17.  
  18.         previous_button="true"
  19.         next_button="true"
  20.         fullscreen_button="true"
  21.         scale_options_button="true"
  22.         image_scale_option="2"
  23.         
  24.         description="true"
  25.         description_bg_color="#000000"
  26.         description_bg_alpha="0.6"
  27.         css_file="flashmo_210_style.css"
  28.         tween_duration="0.5"
  29.         tween_effect="linear">
  30.     </config>
  31.     
  32.     <photo>
  33.         <thumbnail>s_Editorial_Black_Rose_Brand_01.jpg</thumbnail>
  34.         <filename>Editorial_Black_Rose_Brand_01.jpg</filename>
  35.         <tooltip>Image Title 01</tooltip>
  36.         <description><![CDATA[<p class="subtitle">HELVETICA NO ROUNDED</p><p><a href="http://www.flashmo.com/page/1" target="_parent">Lorem ipsum dolor sit amet</a>, consectetur adipiscing elit. <span class="highlight">Quisque at ante sit amet</span> erat laoreet <u>fermentum</u>. Nam scelerisque cursus dolor. Duis nulla diam, posuere ac, varius id, ullamcorper sit amet, libero. <span class="note">This text is dynamically loaded from the external XML file. This textfield supports HTML and CSS.</span></p>]]></description>
  37.     </photo>

Aplicándolo logré quitar Arial de la película Flash, pero me muestra una Times New Roman.

No se si hay que aplicar algo en el index.html, como en la Prueba, os lo pego que es muy corto:

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  3.     <head>
  4.         <title>Fluid Gallery</title>
  5.         <meta name="Keywords" content="Fluid Gallery, XML Flash, Image Gallery, fade in out, photo slideshow, auto play, screen fit, fill, no scale, actionscript 3, flashmo, resizable, fullscreen, 100% width, 100% height, example 1" />
  6.         <meta name="Description" content="Fluid Gallery is an open source XML Flash Image Gallery from flashmo.com website. This is a fluid layout, 100% width and height. Option to show/hide Image Scaling Buttons (screen fit, screen fill or no scale). Description text is using HTML formatted by the CSS file." />
  7.         <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  8.         <style type="text/css">
  9.         <!--
  10.         html, body {
  11.             margin: 0;
  12.             padding: 0;
  13.             height: 100%;
  14.             overflow: hidden;
  15.             color: #FFF;
  16.             background-color: #000;
  17.             font-family:helvetica35;
  18.             font-size: 13px;
  19.         }
  20.         a:link, a:visited { color: #FF6; }
  21.         a:hover { color: #F6F; }
  22.         -->
  23.         </style>
  24.         <!-- embedding SWF -->
  25.         <script type="text/javascript" src="swfobject.js"></script>
  26.         <script type="text/javascript" src="swffit.js"></script>
  27.         <script type="text/javascript">
  28.             var flashvars = {};
  29.             flashvars.xml_file = "flashmo_259_photo_list.xml";
  30.             var params = {};
  31.             params.allowfullscreen = true;
  32.             var attributes = {};
  33.             attributes.id = "flashmo_template";
  34.             attributes.name = "flashmo_template";
  35.             swfobject.embedSWF("flashmo_259_fluid_gallery.swf", "flashmo_template", "100%", "100%", "9.0.0", false, flashvars, params, attributes);
  36.             swffit.fit("flashmo_template", 800, 480);
  37.         </script>
  38.         <!-- embedding SWF -->
  39.     </head>
  40.     <body>
  41.         <!-- flash gallery SWF -->
  42.             <div id="flashmo_template">
  43.                 <br /><br />
  44.                 <a href="http://www.flashmo.com" target="_blank">Free Flash Gallery</a>
  45.                 <br /><br />
  46.                 <a href="http://www.adobe.com/go/getflashplayer" target="_blank">
  47.                     <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
  48.                 </a>
  49.             </div>
  50.         <!-- flash gallery SWF --> 
  51.     </body>
  52. </html>


No se si alguien me puede ayudar, así que quedo a la espera de alguien que sepa de esto (yo ni idea), y mis gracias de antemano por perder un poquito de vuestro tiempo.

Un saludo
Jorge
Última edición por pzin; 12/02/2014 a las 08:35 Razón: formato código