Skip to content
Extraits de code Groupes Projets
Valider 305799fd rédigé par RealET's avatar RealET :kissing_cat:
Parcourir les fichiers

feat : intégration de Modern Font Stacks 

(on garde quand même les anciennes, mais les nouvelles sont plus variées).
parent 9fead829
Aucune branche associée trouvée
Aucune étiquette associée trouvée
Aucune requête de fusion associée trouvée
Masquer les modifications d'espaces
En ligne Côte à côte
formulaires/configurer_soyezcreateurs_couleurs.html
+ 141
− 16
Voir le fichier @ 305799fd
<style>
.key { text-align: right; }
.nope {
color: #DC2626;
}
.yep {
text-decoration: underline;
text-underline-offset: 3px;
color: #265997;
}
.yep ~ .yep {
text-decoration-style: dotted;
text-decoration-color: #26599799;
}
</style>
<div class="formulaire_spip formulaire_configurer_sc">
[<p class="reponse_formulaire reponse_formulaire_ok">(#ENV*{message_ok})</p>]
[<p class="reponse_formulaire reponse_formulaire_erreur">(#ENV*{message_erreur})</p>]
......@@ -595,22 +614,45 @@
</p>
<fieldset>
<h3 class="legend"><:soyezcreateursprive:cfg_polices_affichage:></h3>
<p[ style='font-family:(#ENV{fontsnavigation,'Verdana, Arial, Geneva, sans-serif'});border:1px solid #aaa;']>
<:spip:icone_voir_en_ligne:> : <a href="http://www.angelfire.com/al4/rcollins/style/fonts.html">Fonts for the Web</a>
et <a href="http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html">Common fonts to all versions of Windows &amp; Mac equivalents</a>.
<br /><em><:soyezcreateursprive:cfg_texte_police_choisie:></em>.
</p>
#SET{fonts, #ARRAY{'Arial, Helvetica, sans-serif','Arial, Helvetica, sans-serif',
'Calibri,Tahoma,Arial,Helvetica, sans-serif','Calibri,Tahoma,Arial,Helvetica, sans-serif',
'&quot;Courier New&quot;, Courier, monospace', '"Courier New", Courier, monospace',
'Georgia, serif','Georgia, serif',
'Impact, Charcoal, sans-serif','Impact, Charcoal, sans-serif',
'&quot;Lucida Console&quot;, Monaco, monospace','"Lucida Console", Monaco, monospace',
'&quot;Times New Roman&quot;, Times, serif','"Times New Roman", Times, serif',
'Verdana, Arial, Geneva, sans-serif','Verdana, Arial, Geneva, sans-serif',
'&quot;Trebuchet MS&quot;, Helvetica, sans-serif','"Trebuchet MS", Helvetica, sans-serif'}}
#SET{font_defaut, 'Verdana, Arial, Geneva, sans-serif'}
<[(#VAL{ul}|saisie_balise_structure_formulaire)] class="editer-groupe">
<div[ style='font-family:(#ENV{fontsnavigation,'Verdana, Arial, Geneva, sans-serif'});border:1px solid #aaa;']>
<p><:spip:icone_voir_en_ligne:> : </p>
<ul class="spip">
<li><a href="https://modernfontstacks.com/" class="spip_out" target="_blank" rel="noopener noreferrer">Modern Font Stacks</a></li>
<li><a href="http://www.angelfire.com/al4/rcollins/style/fonts.html" class="spip_out" target="_blank" rel="noopener noreferrer">Fonts for the Web</a> (déprécié)</li>
<li><a href="http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html" class="spip_out" target="_blank" rel="noopener noreferrer">Common fonts to all versions of Windows &amp; Mac equivalents</a> (déprécié)</li>
</ul>
<p><em><:soyezcreateursprive:cfg_texte_police_choisie:></em>.</p>
</div>
<div class="key">
Sur cet ordinateur : <span class="yep">Utilisée</span>, <span class="yep">Installée</span>, <span class="nope">Non installée</span>
</div>
#SET{fonts, #ARRAY{
'system-ui, sans-serif', '<b style="font-family: system-ui, sans-serif;">System UI</b> : <span>system-ui</span>, <span>sans-serif</span>',
'Charter, &quot;Bitstream Charter&quot;, &quot;Sitka Text&quot;, Cambria, serif', '<b style="font-family: Charter, ''Bitstream Charter'', ''Sitka Text'', Cambria, serif;">Transitional</b> : <span>Charter</span>, <span> Bitstream Charter</span>, <span> Sitka Text</span>, <span> Cambria</span>, <span> serif</span>',
'&quot;Iowan Old Style&quot;, &quot;Palatino Linotype&quot;, &quot;URW Palladio L&quot;, P052, serif', '<b style="font-family: ''Iowan Old Style'', ''Palatino Linotype'', ''URW Palladio L'', P052, serif;">Old Style</b> : <span>Iowan Old Style</span>, <span>Palatino Linotype</span>, <span>URW Palladio L</span>, <span>P052</span>, <span>serif</span>',
'Seravek, &quot;Gill Sans Nova&quot;, Ubuntu, Calibri, &quot;DejaVu Sans&quot;, source-sans-pro, sans-serif', '<b style="font-family: Seravek, ''Gill Sans Nova'', Ubuntu, Calibri, ''DejaVu Sans'', source-sans-pro, sans-serif;">Humanist</b> : <span>Seravek</span>, <span>Gill Sans Nova</span>, <span>Ubuntu</span>, <span>Calibri</span>, <span>DejaVu Sans</span>, <span>source-sans-pro</span>, <span>sans-serif</span>',
'Avenir, &quot;Avenir Next LT Pro&quot;, Montserrat, Corbel, &quot;URW Gothic&quot;, source-sans-pro, sans-serif', '<b style="font-family: Avenir, ''Avenir Next LT Pro'', Montserrat, Corbel, ''URW Gothic'', source-sans-pro, sans-serif;">Geometric Humanist</b> : <span>Avenir</span>, <span>Avenir Next LT Pro</span>, <span>Montserrat</span>, <span>Corbel</span>, <span>URW Gothic</span>, <span>source-sans-pro</span>, <span>sans-serif</span>',
'Optima, Candara, &quot;Noto Sans&quot;, source-sans-pro, sans-serif', '<b style="font-family: Optima, Candara, ''Noto Sans'', source-sans-pro, sans-serif;">Classical Humanist</b> : <span>Optima</span>, <span>Candara</span>, <span>Noto Sans</span>, <span>source-sans-pro</span>, <span>sans-serif</span>',
'Inter, Roboto, &quot;Helvetica Neue&quot;, &quot;Arial Nova&quot;, &quot;Nimbus Sans&quot;, Arial, sans-serif', '<b style="font-family: Inter, Roboto, ''Helvetica Neue'', ''Arial Nova'', ''Nimbus Sans'', Arial, sans-serif;">Neo-Grotesque</b> : <span>Inter</span>, <span>Roboto</span>, <span>Helvetica Neue</span>, <span>Arial Nova</span>, <span>Nimbus Sans</span>, <span>Arial</span>, <span>sans-serif</span>',
'&quot;Nimbus Mono PS&quot;, &quot;Courier New&quot;, &quot;Cutive Mono&quot;, monospace', '<b style="font-family: ''Nimbus Mono PS'', ''Courier New'', ''Cutive Mono'', monospace;">Monospace Slab Serif</b> : <span>Nimbus Mono PS</span>, <span>Courier New</span>, <span>Cutive Mono</span>, <span>monospace</span>',
'ui-monospace, &quot;Cascadia Code&quot;, &quot;Source Code Pro&quot;, Menlo, Consolas, &quot;DejaVu Sans Mono&quot;, monospace', '<b style="font-family: ui-monospace, ''Cascadia Code'', ''Source Code Pro'', Menlo, Consolas, ''DejaVu Sans Mono'', monospace;">Monospace Code</b> : <span>ui-monospace</span>, <span>Cascadia Code</span>, <span>Source Code Pro</span>, <span>Menlo</span>, <span>Consolas</span>, <span>DejaVu Sans Mono</span>, <span>monospace</span>',
'Bahnschrift, &quot;DIN Alternate&quot;, &quot;Franklin Gothic Medium&quot;, &quot;Nimbus Sans Narrow&quot;, sans-serif-condensed, sans-serif', '<b style="font-family: Bahnschrift, ''DIN Alternate'', ''Franklin Gothic Medium'', ''Nimbus Sans Narrow'', sans-serif-condensed, sans-serif;">Industrial</b> : <span>Bahnschrift</span>, <span>DIN Alternate</span>, <span>Franklin Gothic Medium</span>, <span>Nimbus Sans Narrow</span>, <span>sans-serif-condensed</span>, <span>sans-serif</span>',
'ui-rounded, &quot;Hiragino Maru Gothic ProN&quot;, Quicksand, Comfortaa, Manjari, &quot;Arial Rounded MT Bold&quot;, Calibri, source-sans-pro, sans-serif', '<b style="font-family: ui-rounded, ''Hiragino Maru Gothic ProN'', Quicksand, Comfortaa, Manjari, ''Arial Rounded MT Bold'', Calibri, source-sans-pro, sans-serif;">Rounded Sans</b> : <span>ui-rounded</span>, <span>Hiragino Maru Gothic ProN</span>, <span>Quicksand</span>, <span>Comfortaa</span>, <span>Manjari</span>, <span>Arial Rounded MT Bold</span>, <span>Calibri</span>, <span>source-sans-pro</span>, <span>sans-serif</span>',
'Rockwell, &quot;Rockwell Nova&quot;, &quot;Roboto Slab&quot;, &quot;DejaVu Serif&quot;, &quot;Sitka Small&quot;, serif', '<b style="font-family: Rockwell, ''Rockwell Nova'', ''Roboto Slab'', ''DejaVu Serif'', ''Sitka Small'', serif;">Slab Serif</b> : <span>Rockwell</span>, <span>Rockwell Nova</span>, <span>Roboto Slab</span>, <span>DejaVu Serif</span>, <span>Sitka Small</span>, <span>serif</span>',
'Superclarendon, &quot;Bookman Old Style&quot;, &quot;URW Bookman&quot;, &quot;URW Bookman L&quot;, &quot;Georgia Pro&quot;, Georgia, serif', '<b style="font-family: Superclarendon, ''Bookman Old Style'', ''URW Bookman'', ''URW Bookman L'', ''Georgia Pro'', Georgia, serif;">Antique</b> : <span>Superclarendon</span>, <span>Bookman Old Style</span>, <span>URW Bookman</span>, <span>URW Bookman L</span>, <span>Georgia Pro</span>, <span>Georgia</span>, <span>serif</span>',
'Didot, &quot;Bodoni MT&quot;, &quot;Noto Serif Display&quot;, &quot;URW Palladio L&quot;, P052, Sylfaen, serif', '<b style="font-family: Didot, ''Bodoni MT'', ''Noto Serif Display'', ''URW Palladio L'', P052, Sylfaen, serif;">Didone</b> : <span>Didot</span>, <span>Bodoni MT</span>, <span>Noto Serif Display</span>, <span>URW Palladio L</span>, <span>P052</span>, <span>Sylfaen</span>, <span>serif</span>',
'&quot;Segoe Print&quot;, &quot;Bradley Hand&quot;, Chilanka, TSCu_Comic, casual, cursive', '<b style="font-family: ''Segoe Print'', ''Bradley Hand'', Chilanka, TSCu_Comic, casual, cursive;">Handwritten</b> : <span>Segoe Print</span>, <span>Bradley Hand</span>, <span>Chilanka</span>, <span>TSCu_Comic</span>, <span>casual</span>, <span>cursive</span>',
'Arial, Helvetica, sans-serif','<span>Arial</span>, <span>Helvetica</span>, <span>sans-serif</span>',
'Calibri,Tahoma,Arial,Helvetica, sans-serif','<span>Calibri</span>, <span>Tahoma</span>, <span>Arial</span>, <span>Helvetica</span>, <span>sans-serif</span>',
'&quot;Courier New&quot;, Courier, monospace', '<span>Courier New</span>, <span>Courier</span>, <span>monospace</span>',
'Georgia, serif','<span>Georgia</span>, <span>serif</span>',
'Impact, Charcoal, sans-serif','<span>Impact</span>, <span>Charcoal</span>, <span>sans-serif</span>',
'&quot;Lucida Console&quot;, Monaco, monospace','<span>Lucida Console</span>, <span>Monaco</span>, <span>monospace</span>',
'&quot;Times New Roman&quot;, Times, serif','<span>Times New Roman</span>, <span>Times</span>, <span>serif</span>',
'Verdana, Arial, Geneva, sans-serif','<span>Verdana</span>, <span>Arial</span>, <span>Geneva</span>, <span>sans-serif</span>',
'&quot;Trebuchet MS&quot;, Helvetica, sans-serif','<span>Trebuchet MS</span>, <span>Helvetica</span>, <span>sans-serif</span>'}}
#SET{font_defaut, '<span>Verdana</span>, <span>Arial</span>, <span>Geneva</span>, <span>sans-serif</span>'}
<[(#VAL{ul}|saisie_balise_structure_formulaire)] class="editer-groupe font-stack">
[(#SAISIE{radio,fontsnavigation,
label=<:soyezcreateursprive:cfg_police_nav:>,
defaut=#GET{font_defaut},
......@@ -679,3 +721,86 @@
</div>
</form>
</div>
<script>/**
* Checks if a font is available to be used on a web page.
*
* @param {String} fontName The name of the font to check
* @param {Function} callback A function to handle the boolean result of the font availability check
* @license MIT
* @copyright Sam Clarke 2013
* @author Sam Clarke <sam@samclarke.com>
* @url https://www.samclarke.com/javascript-is-font-available/
*
* Modified on 02/2023 to execute the font availability check asynchronously
* using requestIdleCallback, and to invoke the callback function with the boolean result of the check.
*/
((document) => {
let width;
const body = document.body;
const container = document.createElement('span');
container.innerHTML = 'wi'.repeat(100);
container.style.cssText = `
position:absolute;
width:auto;
font-size:128px;
left:-99999px;
`;
const getWidth = (fontFamily) => {
container.style.fontFamily = fontFamily;
body.appendChild(container);
width = container.clientWidth;
body.removeChild(container);
return width;
};
// Pre compute the widths of monospace, serif & sans-serif
// to improve performance.
const monoWidth = getWidth('monospace');
const serifWidth = getWidth('serif');
const sansWidth = getWidth('sans-serif');
window.isFontAvailable = (font, callback) => {
if ('requestIdleCallback' in window) {
requestIdleCallback(() => {
const available =
monoWidth !== getWidth(`${font},monospace`) ||
sansWidth !== getWidth(`${font},sans-serif`) ||
serifWidth !== getWidth(`${font},serif`);
callback(available);
});
} else {
// Fallback to setTimeout for Safari
setTimeout(() => {
const available =
monoWidth !== getWidth(`${font},monospace`) ||
sansWidth !== getWidth(`${font},sans-serif`) ||
serifWidth !== getWidth(`${font},serif`);
callback(available);
}, 0);
}
};
})(document);
// ----- FONT STACKS ----- //
const systemfont = document.querySelectorAll('.font-stack span');
Array.from(systemfont).forEach((el) => {
const font = el.innerText;
isFontAvailable(font, (available) => {
if (available) {
el.classList.add('yep');
} else {
el.classList.add('nope');
}
});
});
</script>
lang/soyezcreateursprive_fr.php
+ 4
− 4
Voir le fichier @ 305799fd
......@@ -353,7 +353,7 @@ $GLOBALS[$GLOBALS['idx_lang']] = array(
'cfg_texte_bloc_header' => 'En-tête',
'cfg_texte_central' => 'Texte central',
'cfg_texte_explicationslogin' => 'Texte d’explication (raccourcis typo autorisés)',
'cfg_texte_police_choisie' => 'Ce texte est affiché dans la police choisie',
'cfg_texte_police_choisie' => 'Ce texte est affiché dans la police choisie pour la navigation',
'cfg_texte_quoi2neuf' => 'Quoi de neuf',
'cfg_textesiplanvide' => 'Texte si le plan est vide',
'cfg_textesiplanvide_label' => 'Texte dans le plan du site si le plan est vide de contenu',
......@@ -426,9 +426,9 @@ $GLOBALS[$GLOBALS['idx_lang']] = array(
'commencer' => 'Pour bien commencer',
'configurations_rapides_soyezcreateurs' => 'Configurations rapides de SoyezCréateurs',
'configurersc' => 'Configurer SoyezCréateurs',
'ieconfig_import_spe' => 'Importation de configuration pré-enregistrés <i>(<strong>Attention</strong>, action immédiate !)</i> :',
'layout_accueil_title' => 'Agencement spécifique à la page d’accueil',
'layout_defaut_title' => 'Agencement par défaut pour le site (articles et rubriques)',
......@@ -436,5 +436,5 @@ $GLOBALS[$GLOBALS['idx_lang']] = array(
'soyezcreateurs_couleurs' => 'Couleurs',
'soyezcreateurs_google' => 'Référencement',
'soyezcreateurs_layout' => 'Positionnement',
);
0% ou .
You are about to add 0 people to the discussion. Proceed with caution.
Terminez d'abord l'édition de ce message.
Veuillez vous inscrire ou vous pour commenter

Forge communautaire SPIP | Charte d'utilisation | Signaler un problème sur ce site