Ce que je veux faire:
Je veux utiliser une police non standard sur le Web dans un diverses combinaisons de taille de la police couleur de police et sans avoir à assigner individuelle configs pour chacun. Jusqu'à présent, sIFR semble prendre la taille de police sans problème. mais pas la couleur de la police, donc je travaille sur un travail autour.Sifr 3 Test Barebones - ligne inhabituelle casse
Le problème que je courais dans:
sIFR rompt le texte à la ligne suivante sans <BR> linebreak être présent.
Voici le code HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>sIFR 3 - barebones test</title>
<style type="text/css">
.red{color:#660000;}
.blue{color:#006699;}
</style>
<link type="text/css" rel="stylesheet" href="sifr.css">
<script type="text/javascript" src="sifr.js"></script>
<script type="text/javascript" src="sifr-config.js"></script>
</head>
<body>
<span class="fontName"><span class="red">Corporate brand red</span> default text <span class="blue">product brand blue</span></span>
</body>
</html>
SIFR-config.js Pour une raison SIFR ne tire pas la couleur de la CSS. Donc je le spec dans le fichier de configuration. Les couleurs de la config sont intentionnellement différentes de celles du css.
/*****************************************************************************
It is adviced to place the sIFR JavaScript calls in this file, keeping it
separate from the `sifr.js` file. That way, you can easily swap the `sifr.js`
file for a new version, while keeping the configuration.
You must load this file *after* loading `sifr.js`.
That said, you're of course free to merge the JavaScript files. Just make sure
the copyright statement in `sifr.js` is kept intact.
*****************************************************************************/
//## Create objects that point to the flash files
var fontName = { src: 'fontName.swf' };
//## Set configuration settings if desired
//sIFR.useStyleCheck = true; // read <http://wiki.novemberborn.net/sifr3/DetectingCSSLoad>.
//## Activate sIFR
sIFR.activate(fontName);
//## Replace elements using sIFR
sIFR.replace(fontName, {
selector: '.fontName'
,css: [
'.sIFR-root{color:#000000;leading:-6;}',
'.red{color:#FF0000;}',
'.blue{color:#0000FF;}'
]
,ratios: [8, 1.41, 10, 1.33, 14, 1.31, 16, 1.26, 20, 1.27, 24, 1.26, 25, 1.24, 26, 1.25, 35, 1.24, 49, 1.23, 74, 1.22, 75, 1.21, 79, 1.22, 80, 1.21, 81, 1.22, 1.21]
,wmode:'transparent'
});
Que puis-je faire pour obtenir les résultats souhaités sans rupture prématurée?
** S'il vous plaît noter que toutes les situations seront appropriées pour display: block; *
On dirait que ma question a été divisée en deux ou trois petites questions.
- Saut de ligne
- Quelle est héritée de css la page. (merci pour la réponse Mark!)
Mark et Pekka, vous mentionnez tous les deux letter-spacing dans vos réponses. J'ai peur de ne pas comprendre pourquoi puisque je ne définis pas l'espacement des lettres dans css/sifr-config. Il est laissé au navigateur par défaut. Quelle est la relation avec la largeur du texte en ce qui concerne les sauts de ligne?
J'ai modifié le code comme suit:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>sIFR 3 - barebones test</title>
<style type="text/css">
.red{color:#660000;}
.blue{color:#006699;}
.sIFR-active #SpacingTest .fontName
{
letter-spacing:1px;
}
</style>
<link type="text/css" rel="stylesheet" href="sifr.css">
<script type="text/javascript" src="sifr.js"></script>
<script type="text/javascript" src="sifr-config.js"></script>
</head>
<body>
<b>box model and available width tests</b><br>
1. <span class="fontName"><span class="red">Corporate brand red</span> default text <span class="blue">product brand blue</span></span><br>
2. <div class="fontName"><span class="red">Corporate brand red</span> default text <span class="blue">product brand blue</span></div>
3. <div style="width:1024px;"><span class="fontName"><span class="red">Corporate brand red</span> default text <span class="blue">product brand blue</span></span></div>
4. <div style="width:1024px;" class="fontName"><span class="red">Corporate brand red</span> default text <span class="blue">product brand blue</span></div>
5. <span class="fontName" style="display:block;"><span class="red">Corporate brand red</span> default text <span class="blue">product brand blue</span></span><br>
<hr>
<b>box model and available width tests</b><br>
<div id="SpacingTest">
6. <span class="fontName"><span class="red">Corporate brand red</span> default text <span class="blue">product brand blue</span></span><br>
</div>
</body>
</html>
Informations complémentaires:
spanavec une classe fontName sIFR ciblée sur elle
largeur disponible: toutebodydivavecclass="fontName"
largeur disponible: entièrebody(viadiv)divavec un explicitewidthensemble, contenant unspanavecclass="fontName"
largeur disponible: 1024px (largeur fixediv)divw/explicitewidthetclass="fontName"
largeur disponible: 1024px (largeur fixediv)spanw/display:block;etclass="fontName"
disponible largeur: entierbody(viadisplay:block;)
Résultats:
1,3 et 6 casse encore lors du chargement de la page.
6 occupe plus d'espace, mais se brise encore prématurément.
5 semble bien, jusqu'à ce que le navigateur est redimensionné, puis il ajoute un saut de ligne et détient sur lui, peu importe quoi.
Affichage 2 et 4 sur une seule ligne (comme prévu par cet exemple).
4 ne se rediffuse pas lorsque le navigateur est redimensionné. Ceci est attendu puisque la largeur est fixe. Pas de problème ici. Lorsque le navigateur est réduit, seul le mot «bleu» est forcé à la ligne suivante, le reste du texte reste sur la première ligne.
J'ai redimensionné le texte avec ctrl + = et ctrl + - et quelque chose d'intéressant est arrivé. Tous les cas (sauf 4 - attendus) reflétaient beaucoup plus facilement lorsque le navigateur/l'espace disponible était redimensionné.
Conclusion de ce test:
- éléments de bloc avec une largeur fixe (fixé à cet élément ou son parent/ancêtre) sont sûres, mais votre limite à largeur fixe.
- les éléments de bloc avec une largeur de fluide sont fragiles à des tailles de police plus petites
- utilisation sur des éléments en ligne à vos risques et périls. Ne pas utiliser au milieu d'un paragraphe, l'objet flash lui-même ne peut être autre chose que bloquer.
Mark, pourriez-vous préciser ce que sIFR regarde largeur disponible? Je ne pouvais pas le trouver sur le wiki de sIFR 3.(sur une note de côté: tous les liens de livedoc à adobe semblent être des liens brisés, je crains de ne pas pouvoir les trouver en cherchant sur le site d'adobe). Est-ce que je regarde l'espace disponible de la mauvaise façon? L'élément entier du corps ne devrait-il pas avoir beaucoup de largeur? Pour le projet que je suis en train de travailler, il semble que le standard pour bloquer les éléments de niveau seulement avec des tailles de police de 18px et plus sera la route prise pour ne pas le maintenir plus loin, mais je continue avoir un intérêt personnel et aimerait poursuivre la compréhension de sIFR et la ligne de rupture plus loin. Je suis nouveau sur Stack Overflow et je suis préoccupé par le fait que ce soit une «discussion étendue» qui, selon la FAQ, dépasse la portée de ce site. S'il y a un endroit plus approprié pour en discuter, veuillez me le faire savoir et je le ferai si nécessaire.
Cordialement