1. #1
    Membre confirmé
    Homme Profil pro
    Développeur informatique
    Inscrit en
    février 2008
    Messages
    744
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Électronique et micro-électronique

    Informations forums :
    Inscription : février 2008
    Messages : 744
    Points : 564
    Points
    564

    Par défaut Utilisation de @font face

    Bonjour,

    Je découvre le @font face. En voyant les différentes explications sur le net, cela à l'air simple à utiliser.

    J'utilise Mozillia firefox pour Linux Mint 1.0 et la version de firefox est la 49.0.
    Pour comprendre les chemins de fichier de mon projet, voici une copie de mon dossier racine :
    Nom : web_content.png
Affichages : 52
Taille : 7,5 Ko

    Les fichiers ttf, woff et woff2 sont dans le dossier utility.

    Donc voici le html dans lequel je désire utiliser la police :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <div id="general_body"   style="text-align:center;">
    	<p id="contact_titre" class="contact_class_color_or">{{contact.titre}}</p>
    </div>
    Le fichier css que voici qui contient le @font face et le font familly :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
     
    @font-face {
        font-family: 'shojumaruregular';
        src: url('../utility/shojumaru-regular-webfont.woff2') format('woff2'),
             url('../utility/shojumaru-regular-webfont.woff') format('woff');
             src: url("../utility/shojumaru-regular-webfont.ttf") format("opentype");
        font-weight: normal;
        font-style: normal;
     
    }
     
    #contact_titre {
    	font-family: 'shojumaruregular';
    	text-shadow: 5px 5px 15px #c90016;
            font-size:8vw;
    }
    Le résultat n'est pas au rendez-vous ....

    Sans utiliser la police (c'est à dire en commentant la ligne 13 du css), j'obtiens ceci :
    Nom : test_Z_sans.png
Affichages : 45
Taille : 22,2 Ko
    Et en l'utilisant j'obtiens cela :
    Nom : test_Z_avec.png
Affichages : 44
Taille : 24,0 Ko

    Donc on voit bien qu'il y a une différence de police notamment sur la lettre 'Z' mais c'est bien différent du résultat auquel je m'attends puisque la police que j'ai téléchargé est plutôt de type asiatique et visible ici : http://www.fontspace.com/astigmatic-...tute/shojumaru

    Et en plus, comme j'ai passé la font dans font squirel, il y a un fichier demo.html qui reprend cette police et qui fonctionne très bien avec le même navigateur ....
    voici le fichier de shojumaru-regular-demo.html que j'ai downloadé de font squirel :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286
    287
    288
    289
    290
    291
    292
    293
    294
    295
    296
    297
    298
    299
    300
    301
    302
    303
    304
    305
    306
    307
    308
    309
    310
    311
    312
    313
    314
    315
    316
    317
    318
    319
    320
    321
    322
    323
    324
    325
    326
    327
    328
    329
    330
    331
    332
    333
    334
    335
    336
    337
    338
    339
    340
    341
    342
    343
    344
    345
    346
    347
    348
    349
    350
    351
    352
    353
    354
    355
    356
    357
    358
    359
    360
    361
    362
    363
    364
    365
    366
    367
    368
    369
    370
    371
    372
    373
    374
    375
    376
    377
    378
    379
    380
    381
    382
    383
    384
    385
    386
    387
    388
    389
    390
    391
    392
    393
    394
    395
    396
    397
    398
    399
    400
    401
    402
    403
    404
    405
    406
    407
    408
    409
    410
    411
    412
    413
    414
    415
    416
    417
    418
    419
    420
    421
    422
    423
    424
    425
    426
    427
    428
    429
    430
    431
    432
    433
    434
    435
    436
    437
    438
    439
    440
    441
    442
    443
    444
    445
    446
    447
    448
    449
    450
    451
    452
    453
    454
    455
    456
    457
    458
    459
    460
    461
    462
    463
    464
    465
    466
    467
    468
    469
    470
    471
    472
    473
    474
    475
    476
    477
    478
    479
    480
    481
    482
    483
    484
    485
    486
    487
    488
    489
    490
    491
    492
    493
    494
    495
    496
    497
    498
    499
    500
    501
    502
    503
    504
    505
    506
    507
    508
    509
    510
    511
    512
    513
    514
    515
    516
    517
    518
    519
    520
    521
    522
    523
    524
    525
    526
    527
    528
    529
    530
    531
    532
    533
    534
    535
    536
    537
    538
    539
    540
    541
    542
    543
    544
    545
    546
    547
    548
    549
    550
    551
    552
    553
    554
    555
    556
    557
    558
    559
    560
    561
    562
    563
    564
    565
    566
    567
    568
    569
    570
    571
    572
    573
    574
    575
    576
    577
    578
    579
    580
    581
    582
    583
    584
    585
    586
    587
    588
    589
    590
    591
    592
    593
    594
    595
    596
    597
    598
    599
    600
    601
    602
    603
    604
    605
    606
    607
    608
    609
    610
    611
    612
    613
    614
    615
    616
    617
    618
    619
    620
    621
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    	<script type="text/javascript">
    	(function($){$.fn.easyTabs=function(option){var param=jQuery.extend({fadeSpeed:"fast",defaultContent:1,activeClass:'active'},option);$(this).each(function(){var thisId="#"+this.id;if(param.defaultContent==''){param.defaultContent=1;}
    	if(typeof param.defaultContent=="number")
    	{var defaultTab=$(thisId+" .tabs li:eq("+(param.defaultContent-1)+") a").attr('href').substr(1);}else{var defaultTab=param.defaultContent;}
    	$(thisId+" .tabs li a").each(function(){var tabToHide=$(this).attr('href').substr(1);$("#"+tabToHide).addClass('easytabs-tab-content');});hideAll();changeContent(defaultTab);function hideAll(){$(thisId+" .easytabs-tab-content").hide();}
    	function changeContent(tabId){hideAll();$(thisId+" .tabs li").removeClass(param.activeClass);$(thisId+" .tabs li a[href=#"+tabId+"]").closest('li').addClass(param.activeClass);if(param.fadeSpeed!="none")
    	{$(thisId+" #"+tabId).fadeIn(param.fadeSpeed);}else{$(thisId+" #"+tabId).show();}}
    	$(thisId+" .tabs li").click(function(){var tabId=$(this).find('a').attr('href').substr(1);changeContent(tabId);return false;});});}})(jQuery);
    	</script>
    	<link rel="stylesheet" href="specimen_files/specimen_stylesheet.css" type="text/css" charset="utf-8" />
    	<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
     
    	<style type="text/css">
    					body{
    				font-family: 'shojumaruregular';
    							}
    		</style>
     
    	<title>Shojumaru Regular Specimen</title>
     
     
    	<script type="text/javascript" charset="utf-8">
    		$(document).ready(function() {
    			$('#container').easyTabs({defaultContent:1});
    		});
    	</script>
    </head>
     
    <body>
    <div id="container">
    	<div id="header">
    		Shojumaru Regular	</div>
    	<ul class="tabs">
    		<li><a href="#specimen">Specimen</a></li>
    		<li><a href="#layout">Sample Layout</a></li>
    				<li><a href="#glyphs">Glyphs &amp; Languages</a></li>
    		<li><a href="#installing">Installing Webfonts</a></li>
     
    	</ul>
     
    	<div id="main_content">
     
     
    			<div id="specimen">
     
    				<div class="section">
    					<div class="grid12 firstcol">
    						<div class="huge">AaBb</div>
    					</div>
    				</div>
     
    				<div class="section">
    					<div class="glyph_range">A&#x200B;B&#x200b;C&#x200b;D&#x200b;E&#x200b;F&#x200b;G&#x200b;H&#x200b;I&#x200b;J&#x200b;K&#x200b;L&#x200b;M&#x200b;N&#x200b;O&#x200b;P&#x200b;Q&#x200b;R&#x200b;S&#x200b;T&#x200b;U&#x200b;V&#x200b;W&#x200b;X&#x200b;Y&#x200b;Z&#x200b;a&#x200b;b&#x200b;c&#x200b;d&#x200b;e&#x200b;f&#x200b;g&#x200b;h&#x200b;i&#x200b;j&#x200b;k&#x200b;l&#x200b;m&#x200b;n&#x200b;o&#x200b;p&#x200b;q&#x200b;r&#x200b;s&#x200b;t&#x200b;u&#x200b;v&#x200b;w&#x200b;x&#x200b;y&#x200b;z&#x200b;1&#x200b;2&#x200b;3&#x200b;4&#x200b;5&#x200b;6&#x200b;7&#x200b;8&#x200b;9&#x200b;0&#x200b;&amp;&#x200b;.&#x200b;,&#x200b;?&#x200b;!&#x200b;@&#x200b;(&#x200b;)&#x200b;#&#x200b;$&#x200b;%&#x200b;*&#x200b;+&#x200b;-&#x200b;=&#x200b;:&#x200b;;</div>
    				</div>
    				<div class="section">
    					<div class="grid12 firstcol">
    						<table class="sample_table">
    							<tr><td>10</td><td class="size10">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
    							<tr><td>11</td><td class="size11">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
    							<tr><td>12</td><td class="size12">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
    							<tr><td>13</td><td class="size13">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
    							<tr><td>14</td><td class="size14">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
    							<tr><td>16</td><td class="size16">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
    							<tr><td>18</td><td class="size18">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
    							<tr><td>20</td><td class="size20">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
    							<tr><td>24</td><td class="size24">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
    							<tr><td>30</td><td class="size30">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
    							<tr><td>36</td><td class="size36">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
    							<tr><td>48</td><td class="size48">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
    							<tr><td>60</td><td class="size60">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
    							<tr><td>72</td><td class="size72">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
    							<tr><td>90</td><td class="size90">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
    						</table>
     
    					</div>
     
    				</div>
     
     
     
    								<div class="section" id="bodycomparison">
     
     
    										<div id="xheight">
    				<div class="fontbody">&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;body</div><div class="arialbody">body</div><div class="verdanabody">body</div><div class="georgiabody">body</div></div>
    										<div class="fontbody" style="z-index:1">
    											body<span>Shojumaru Regular</span>
    										</div>
    										<div class="arialbody" style="z-index:1">
    											body<span>Arial</span>
    										</div>
    										<div class="verdanabody" style="z-index:1">
    											body<span>Verdana</span>
    										</div>
    										<div class="georgiabody" style="z-index:1">
    											body<span>Georgia</span>
    										</div>
     
     
     
    								</div>
     
     
    				<div class="section psample psample_row1" id="">
     
    					<div class="grid2 firstcol">
    						<p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
     
    					</div>
    					<div class="grid3">
    						<p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
     
    					</div>
    					<div class="grid3">
    						<p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
     
    					</div>
    					<div class="grid4">
    						<p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
     
    					</div>
    					<div class="white_blend"></div>
     
    				</div>
    				<div class="section psample psample_row2" id="">
    					<div class="grid3 firstcol">
    						<p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
     
    					</div>
    					<div class="grid4">
    						<p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
     
    					</div>
    					<div class="grid5">
    						<p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
     
    					</div>
     
    					<div class="white_blend"></div>
     
    				</div>
     
    				<div class="section psample psample_row3" id="">
    					<div class="grid5 firstcol">
    						<p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
    					</div>
    					<div class="grid7">
    						<p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
    					</div>
     
    					<div class="white_blend"></div>
     
    				</div>
     
    				<div class="section psample psample_row4" id="">
    					<div class="grid12 firstcol">
    						<p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
    					</div>
    					<div class="white_blend"></div>
     
    				</div>
     
     
     
    				<div class="section psample psample_row1 fullreverse">
    					<div class="grid2 firstcol">
    						<p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
     
    					</div>
    					<div class="grid3">
    						<p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
     
    					</div>
    					<div class="grid3">
    						<p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
     
    					</div>
    					<div class="grid4">
    						<p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
     
    					</div>
    					<div class="black_blend"></div>
     
    				</div>
     
    				<div class="section psample psample_row2 fullreverse">
    					<div class="grid3 firstcol">
    						<p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
     
    					</div>
    					<div class="grid4">
    						<p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
     
    					</div>
    					<div class="grid5">
    						<p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
     
    					</div>
    					<div class="black_blend"></div>
     
    				</div>
     
    				<div class="section psample fullreverse psample_row3" id="">
    					<div class="grid5 firstcol">
    						<p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
    					</div>
    					<div class="grid7">
    						<p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
    					</div>
     
    					<div class="black_blend"></div>
     
    				</div>
     
    				<div class="section psample fullreverse psample_row4" id="" style="border-bottom: 20px #000 solid;">
    					<div class="grid12 firstcol">
    						<p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
    					</div>
    					<div class="black_blend"></div>
     
    				</div>
     
     
     
     
    			</div>
     
    			<div id="layout">
     
    				<div class="section">
     
    					<div class="grid12 firstcol">
    						<h1>Lorem Ipsum Dolor</h1>
    						<h2>Etiam porta sem malesuada magna mollis euismod</h2>
     
    						<p class="byline">By <a href="#link">Aenean Lacinia</a></p>
    					</div>
    				</div>
    				<div class="section">
    					<div class="grid8 firstcol">
    						<p class="large">Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
     
     
    						<h3>Pellentesque ornare sem</h3>
     
    						<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. </p>
     
    						<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
     
    						<p>Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. </p>
     
    						<p>Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. </p>
     
    						<h3>Cras mattis consectetur</h3>
     
    						<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. </p>
     
    						<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
    					</div>
     
    					<div class="grid4 sidebar">
     
    						<div class="box reverse">
    							<p class="last">Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    						</div>
     
    						<p class="caption">Maecenas sed diam eget risus varius.</p>
     
    						<p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
     
     
     
    						<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. </p>
     
    						<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
     
    					</div>
    				</div>
     
    			</div>
     
     
     
     
     
     
    		<div id="glyphs">
    			<div class="section">
    				<div class="grid12 firstcol">
     
    				<h1>Language Support</h1>
    				<p>The subset of Shojumaru Regular in this kit supports the following languages:<br />
     
    					Albanian, Basque, Breton, Chamorro, Danish, Dutch, English, Faroese, Finnish, French, Frisian, Galician, German, Icelandic, Italian, Malagasy, Norwegian, Portuguese, Spanish, Alsatian, Aragonese, Arapaho, Arrernte, Asturian, Aymara, Bislama, Cebuano, Corsican, Fijian, French_creole, Genoese, Gilbertese, Greenlandic, Haitian_creole, Hiligaynon, Hmong, Hopi, Ibanag, Iloko_ilokano, Indonesian, Interglossa_glosa, Interlingua, Irish_gaelic, Jerriais, Lojban, Lombard, Luxembourgeois, Manx, Mohawk, Norfolk_pitcairnese, Occitan, Oromo, Pangasinan, Papiamento, Piedmontese, Potawatomi, Rhaeto-romance, Romansh, Rotokas, Sami_lule, Samoan, Sardinian, Scots_gaelic, Seychelles_creole, Shona, Sicilian, Somali, Southern_ndebele, Swahili, Swati_swazi, Tagalog_filipino_pilipino, Tetum, Tok_pisin, Uyghur_latinized, Volapuk, Walloon, Warlpiri, Xhosa, Yapese, Zulu, Latinbasic, Ubasic, Demo				</p>
    				<h1>Glyph Chart</h1>
    				<p>The subset of Shojumaru Regular in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.</p>
    				<div id="glyph_chart">
     
    																				 <div><p>&amp;#13;</p>
    </div>
    																				 <div><p>&amp;#32;</p> </div>
    																				 <div><p>&amp;#33;</p>!</div>
    																				 <div><p>&amp;#34;</p>"</div>
    																				 <div><p>&amp;#35;</p>#</div>
    																				 <div><p>&amp;#36;</p>$</div>
    																				 <div><p>&amp;#37;</p>%</div>
    																				 <div><p>&amp;#38;</p>&</div>
    																				 <div><p>&amp;#39;</p>'</div>
    																				 <div><p>&amp;#40;</p>(</div>
    																				 <div><p>&amp;#41;</p>)</div>
    																				 <div><p>&amp;#42;</p>*</div>
    																				 <div><p>&amp;#43;</p>+</div>
    																				 <div><p>&amp;#44;</p>,</div>
    																				 <div><p>&amp;#45;</p>-</div>
    																				 <div><p>&amp;#46;</p>.</div>
    																				 <div><p>&amp;#47;</p>/</div>
    																				 <div><p>&amp;#48;</p>0</div>
    																				 <div><p>&amp;#49;</p>1</div>
    																				 <div><p>&amp;#50;</p>2</div>
    																				 <div><p>&amp;#51;</p>3</div>
    																				 <div><p>&amp;#52;</p>4</div>
    																				 <div><p>&amp;#53;</p>5</div>
    																				 <div><p>&amp;#54;</p>6</div>
    																				 <div><p>&amp;#55;</p>7</div>
    																				 <div><p>&amp;#56;</p>8</div>
    																				 <div><p>&amp;#57;</p>9</div>
    																				 <div><p>&amp;#58;</p>:</div>
    																				 <div><p>&amp;#59;</p>;</div>
    																				 <div><p>&amp;#60;</p><</div>
    																				 <div><p>&amp;#61;</p>=</div>
    																				 <div><p>&amp;#62;</p>></div>
    																				 <div><p>&amp;#63;</p>?</div>
    																				 <div><p>&amp;#64;</p>@</div>
    																				 <div><p>&amp;#65;</p>A</div>
    																				 <div><p>&amp;#66;</p>B</div>
    																				 <div><p>&amp;#67;</p>C</div>
    																				 <div><p>&amp;#68;</p>D</div>
    																				 <div><p>&amp;#69;</p>E</div>
    																				 <div><p>&amp;#70;</p>F</div>
    																				 <div><p>&amp;#71;</p>G</div>
    																				 <div><p>&amp;#72;</p>H</div>
    																				 <div><p>&amp;#73;</p>I</div>
    																				 <div><p>&amp;#74;</p>J</div>
    																				 <div><p>&amp;#75;</p>K</div>
    																				 <div><p>&amp;#76;</p>L</div>
    																				 <div><p>&amp;#77;</p>M</div>
    																				 <div><p>&amp;#78;</p>N</div>
    																				 <div><p>&amp;#79;</p>O</div>
    																				 <div><p>&amp;#80;</p>P</div>
    																				 <div><p>&amp;#81;</p>Q</div>
    																				 <div><p>&amp;#82;</p>R</div>
    																				 <div><p>&amp;#83;</p>S</div>
    																				 <div><p>&amp;#84;</p>T</div>
    																				 <div><p>&amp;#85;</p>U</div>
    																				 <div><p>&amp;#86;</p>V</div>
    																				 <div><p>&amp;#87;</p>W</div>
    																				 <div><p>&amp;#88;</p>X</div>
    																				 <div><p>&amp;#89;</p>Y</div>
    																				 <div><p>&amp;#90;</p>Z</div>
    																				 <div><p>&amp;#91;</p>[</div>
    																				 <div><p>&amp;#92;</p>\</div>
    																				 <div><p>&amp;#93;</p>]</div>
    																				 <div><p>&amp;#94;</p>^</div>
    																				 <div><p>&amp;#95;</p>_</div>
    																				 <div><p>&amp;#96;</p>`</div>
    																				 <div><p>&amp;#97;</p>a</div>
    																				 <div><p>&amp;#98;</p>b</div>
    																				 <div><p>&amp;#99;</p>c</div>
    																				 <div><p>&amp;#100;</p>d</div>
    																				 <div><p>&amp;#101;</p>e</div>
    																				 <div><p>&amp;#102;</p>f</div>
    																				 <div><p>&amp;#103;</p>g</div>
    																				 <div><p>&amp;#104;</p>h</div>
    																				 <div><p>&amp;#105;</p>i</div>
    																				 <div><p>&amp;#106;</p>j</div>
    																				 <div><p>&amp;#107;</p>k</div>
    																				 <div><p>&amp;#108;</p>l</div>
    																				 <div><p>&amp;#109;</p>m</div>
    																				 <div><p>&amp;#110;</p>n</div>
    																				 <div><p>&amp;#111;</p>o</div>
    																				 <div><p>&amp;#112;</p>p</div>
    																				 <div><p>&amp;#113;</p>q</div>
    																				 <div><p>&amp;#114;</p>r</div>
    																				 <div><p>&amp;#115;</p>s</div>
    																				 <div><p>&amp;#116;</p>t</div>
    																				 <div><p>&amp;#117;</p>u</div>
    																				 <div><p>&amp;#118;</p>v</div>
    																				 <div><p>&amp;#119;</p>w</div>
    																				 <div><p>&amp;#120;</p>x</div>
    																				 <div><p>&amp;#121;</p>y</div>
    																				 <div><p>&amp;#122;</p>z</div>
    																				 <div><p>&amp;#123;</p>{</div>
    																				 <div><p>&amp;#124;</p>|</div>
    																				 <div><p>&amp;#125;</p>}</div>
    																				 <div><p>&amp;#126;</p>~</div>
    																				 <div><p>&amp;#160;</p>*</div>
    																				 <div><p>&amp;#161;</p>¡</div>
    																				 <div><p>&amp;#162;</p>¢</div>
    																				 <div><p>&amp;#163;</p>£</div>
    																				 <div><p>&amp;#164;</p>¤</div>
    																				 <div><p>&amp;#165;</p>¥</div>
    																				 <div><p>&amp;#166;</p>¦</div>
    																				 <div><p>&amp;#167;</p>§</div>
    																				 <div><p>&amp;#168;</p>¨</div>
    																				 <div><p>&amp;#169;</p>©</div>
    																				 <div><p>&amp;#170;</p>ª</div>
    																				 <div><p>&amp;#171;</p>«</div>
    																				 <div><p>&amp;#172;</p>¬</div>
    																				 <div><p>&amp;#173;</p>*</div>
    																				 <div><p>&amp;#174;</p>®</div>
    																				 <div><p>&amp;#175;</p>¯</div>
    																				 <div><p>&amp;#176;</p>°</div>
    																				 <div><p>&amp;#177;</p>±</div>
    																				 <div><p>&amp;#178;</p>²</div>
    																				 <div><p>&amp;#179;</p>³</div>
    																				 <div><p>&amp;#180;</p>´</div>
    																				 <div><p>&amp;#181;</p>µ</div>
    																				 <div><p>&amp;#182;</p>¶</div>
    																				 <div><p>&amp;#183;</p>·</div>
    																				 <div><p>&amp;#184;</p>¸</div>
    																				 <div><p>&amp;#185;</p>¹</div>
    																				 <div><p>&amp;#186;</p>º</div>
    																				 <div><p>&amp;#187;</p>»</div>
    																				 <div><p>&amp;#188;</p>¼</div>
    																				 <div><p>&amp;#189;</p>½</div>
    																				 <div><p>&amp;#190;</p>¾</div>
    																				 <div><p>&amp;#191;</p>¿</div>
    																				 <div><p>&amp;#192;</p>À</div>
    																				 <div><p>&amp;#193;</p>Á</div>
    																				 <div><p>&amp;#194;</p>Â</div>
    																				 <div><p>&amp;#195;</p>Ã</div>
    																				 <div><p>&amp;#196;</p>Ä</div>
    																				 <div><p>&amp;#197;</p>Å</div>
    																				 <div><p>&amp;#198;</p>Æ</div>
    																				 <div><p>&amp;#199;</p>Ç</div>
    																				 <div><p>&amp;#200;</p>È</div>
    																				 <div><p>&amp;#201;</p>É</div>
    																				 <div><p>&amp;#202;</p>Ê</div>
    																				 <div><p>&amp;#203;</p>Ë</div>
    																				 <div><p>&amp;#204;</p>Ì</div>
    																				 <div><p>&amp;#205;</p>Í</div>
    																				 <div><p>&amp;#206;</p>Î</div>
    																				 <div><p>&amp;#207;</p>Ï</div>
    																				 <div><p>&amp;#208;</p>Ð</div>
    																				 <div><p>&amp;#209;</p>Ñ</div>
    																				 <div><p>&amp;#210;</p>Ò</div>
    																				 <div><p>&amp;#211;</p>Ó</div>
    																				 <div><p>&amp;#212;</p>Ô</div>
    																				 <div><p>&amp;#213;</p>Õ</div>
    																				 <div><p>&amp;#214;</p>Ö</div>
    																				 <div><p>&amp;#215;</p>×</div>
    																				 <div><p>&amp;#216;</p>Ø</div>
    																				 <div><p>&amp;#217;</p>Ù</div>
    																				 <div><p>&amp;#218;</p>Ú</div>
    																				 <div><p>&amp;#219;</p>Û</div>
    																				 <div><p>&amp;#220;</p>Ü</div>
    																				 <div><p>&amp;#221;</p>Ý</div>
    																				 <div><p>&amp;#222;</p>Þ</div>
    																				 <div><p>&amp;#223;</p>ß</div>
    																				 <div><p>&amp;#224;</p>à</div>
    																				 <div><p>&amp;#225;</p>á</div>
    																				 <div><p>&amp;#226;</p>â</div>
    																				 <div><p>&amp;#227;</p>ã</div>
    																				 <div><p>&amp;#228;</p>ä</div>
    																				 <div><p>&amp;#229;</p>å</div>
    																				 <div><p>&amp;#230;</p>æ</div>
    																				 <div><p>&amp;#231;</p>ç</div>
    																				 <div><p>&amp;#232;</p>è</div>
    																				 <div><p>&amp;#233;</p>é</div>
    																				 <div><p>&amp;#234;</p>ê</div>
    																				 <div><p>&amp;#235;</p>ë</div>
    																				 <div><p>&amp;#236;</p>ì</div>
    																				 <div><p>&amp;#237;</p>í</div>
    																				 <div><p>&amp;#238;</p>î</div>
    																				 <div><p>&amp;#239;</p>ï</div>
    																				 <div><p>&amp;#240;</p>ð</div>
    																				 <div><p>&amp;#241;</p>ñ</div>
    																				 <div><p>&amp;#242;</p>ò</div>
    																				 <div><p>&amp;#243;</p>ó</div>
    																				 <div><p>&amp;#244;</p>ô</div>
    																				 <div><p>&amp;#245;</p>õ</div>
    																				 <div><p>&amp;#246;</p>ö</div>
    																				 <div><p>&amp;#247;</p>÷</div>
    																				 <div><p>&amp;#248;</p>ø</div>
    																				 <div><p>&amp;#249;</p>ù</div>
    																				 <div><p>&amp;#250;</p>ú</div>
    																				 <div><p>&amp;#251;</p>û</div>
    																				 <div><p>&amp;#252;</p>ü</div>
    																				 <div><p>&amp;#253;</p>ý</div>
    																				 <div><p>&amp;#254;</p>þ</div>
    																				 <div><p>&amp;#255;</p>ÿ</div>
    																				 <div><p>&amp;#338;</p>Œ</div>
    																				 <div><p>&amp;#339;</p>œ</div>
    																				 <div><p>&amp;#376;</p>Ÿ</div>
    																				 <div><p>&amp;#710;</p>ˆ</div>
    																				 <div><p>&amp;#732;</p>˜</div>
    																				 <div><p>&amp;#8192;</p>&#8192;</div>
    																				 <div><p>&amp;#8193;</p>&#8193;</div>
    																				 <div><p>&amp;#8194;</p>&#8194;</div>
    																				 <div><p>&amp;#8195;</p>&#8195;</div>
    																				 <div><p>&amp;#8196;</p>&#8196;</div>
    																				 <div><p>&amp;#8197;</p>&#8197;</div>
    																				 <div><p>&amp;#8198;</p>&#8198;</div>
    																				 <div><p>&amp;#8199;</p>&#8199;</div>
    																				 <div><p>&amp;#8200;</p>&#8200;</div>
    																				 <div><p>&amp;#8201;</p>&#8201;</div>
    																				 <div><p>&amp;#8202;</p>&#8202;</div>
    																				 <div><p>&amp;#8208;</p>&#8208;</div>
    																				 <div><p>&amp;#8209;</p>&#8209;</div>
    																				 <div><p>&amp;#8210;</p>&#8210;</div>
    																				 <div><p>&amp;#8211;</p>–</div>
    																				 <div><p>&amp;#8212;</p>—</div>
    																				 <div><p>&amp;#8216;</p>‘</div>
    																				 <div><p>&amp;#8217;</p>’</div>
    																				 <div><p>&amp;#8218;</p>‚</div>
    																				 <div><p>&amp;#8220;</p>“</div>
    																				 <div><p>&amp;#8221;</p>”</div>
    																				 <div><p>&amp;#8222;</p>„</div>
    																				 <div><p>&amp;#8226;</p>•</div>
    																				 <div><p>&amp;#8230;</p>…</div>
    																				 <div><p>&amp;#8239;</p>&#8239;</div>
    																				 <div><p>&amp;#8249;</p>‹</div>
    																				 <div><p>&amp;#8250;</p>›</div>
    																				 <div><p>&amp;#8287;</p>&#8287;</div>
    																				 <div><p>&amp;#8364;</p>€</div>
    																				 <div><p>&amp;#8482;</p>™</div>
    																				 <div><p>&amp;#9724;</p>&#9724;</div>
    																				 <div><p>&amp;#64257;</p>&#64257;</div>
    																				 <div><p>&amp;#64258;</p>&#64258;</div>
    																																						</div>	
    				</div>
     
     
    			</div>
    		</div>
     
     
    		<div id="specs">
     
    		</div>
     
    		<div id="installing">
    			<div class="section">
    				<div class="grid7 firstcol">
    					<h1>Installing Webfonts</h1>
     
    					<p>Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.</p>
     
    					<h2>1. Upload your webfonts</h2>
    					<p>You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.</p>
     
    					<h2>2. Include the webfont stylesheet</h2>
    					<p>A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the <a href="https://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax">Fontspring blog post</a> about it. The code for it is as follows:</p>
     
     
    <code>
    @font-face{ 
    	font-family: 'MyWebFont';
    	src: url('WebFont.eot');
    	src: url('WebFont.eot?#iefix') format('embedded-opentype'),
    	     url('WebFont.woff') format('woff'),
    	     url('WebFont.ttf') format('truetype'),
    	     url('WebFont.svg#webfont') format('svg');
    }
    </code>
     
    	<p>We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:</p>
    	<code>&lt;link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /&gt;</code>
     
    					<h2>3. Modify your own stylesheet</h2>
    					<p>To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:</p>
    <code>p { font-family: 'WebFont', Arial, sans-serif; }</code>
     
    <h2>4. Test</h2>
    <p>Getting webfonts to work cross-browser <em>can</em> be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.</p>
    				</div>
     
    				<div class="grid5 sidebar">
    					<div class="box">
    						<h2>Troubleshooting<br />Font-Face Problems</h2>
    						<p>Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.</p>
     
    						<h3>Fonts not showing in any browser</h3>
     
    						<p>This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.</p>
     
    						<h3>Fonts not loading in iPhone or iPad</h3>
     
    						<p>The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.</p>
     
    						<h3>Fonts not loading in Firefox</h3>
     
    						<p>The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)</p>
     
    						<h3>Fonts not loading in IE</h3>
     
    						<p>Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.</p>
     
    						<h3>Fonts not loading in IE9</h3>
     
    						<p>IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.</p>
    					</div>
    				</div>
    			</div>
     
    		</div>
     
    	</div>
    	<div id="footer">
    		<p>&copy;2010-2017 Font Squirrel. All rights reserved.</p>
    	</div>
    </div>
    </body>
    </html>
    et le css aussi downloadé de font squirel :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    /*! Generated by Font Squirrel (https://www.fontsquirrel.com) on December 1, 2017 */
     
    @font-face {
        font-family: 'shojumaruregular';
        src: url('shojumaru-regular-webfont.woff2') format('woff2'),
             url('shojumaru-regular-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;
     
    }
    J'ai essayé plein de choses (mais pas la bonne chose ) ....
    Quelqu'un aurait-il une idée pour m'aider s'il vous plaît ?

    Merci beaucoup !

  2. #2
    Membre confirmé
    Homme Profil pro
    Retraité informatique
    Inscrit en
    juin 2012
    Messages
    404
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Retraité informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : juin 2012
    Messages : 404
    Points : 535
    Points
    535

    Par défaut

    Apparemment il ne trouve pas la font.
    N'y a-t-il pas un problème de chemin relatif ou absolu?
    Je vois ../
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    src: url('../utility/shojumaru-regular-webfont.woff2')
    Donc utilisation d'un chemin relatif. Toujours délicat à utiliser.
    En partant de la racine du site et en utilisant le chemin absolu, il y a moins de risque d'erreur.
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    src: url('/utility/shojumaru-regular-webfont.woff2')

  3. #3
    Membre confirmé
    Homme Profil pro
    Développeur informatique
    Inscrit en
    février 2008
    Messages
    744
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Électronique et micro-électronique

    Informations forums :
    Inscription : février 2008
    Messages : 744
    Points : 564
    Points
    564

    Par défaut

    Bonjour,

    Je pense que vous avez raison, j'ai bien essayé votre solution, mais sans succés.

    J'avais oublié de mettre, dans mon post précédent, le message d'erreur de firefox :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    downloadable font: download failed (font-family: "shojumaruregular" style:normal weight:normal stretch:normal src index:0): bad URI or cross-site access not allowed source: file:///home/franckymint/informatique/workspaces/Chez_Yen_2017/Git/ClientWebServer/ClientWebServer/WebContent/utility/shojumaru-regular-webfont.ttf
    La source indiquée dans ce message d'erreur est bonne.

    Pour les droits d'accès des dossiers, je pense que c'est bon aussi :
    Nom : droit_acces.png
Affichages : 37
Taille : 27,3 Ko

    En plus, j'ai copié les fichiers woff, woff2 et ttf dans les dossiers 'utility', 'vues', 'css' et à la racine ... rien à faire !

    Merci de votre aide,

  4. #4
    Membre confirmé
    Homme Profil pro
    Développeur informatique
    Inscrit en
    février 2008
    Messages
    744
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Électronique et micro-électronique

    Informations forums :
    Inscription : février 2008
    Messages : 744
    Points : 564
    Points
    564

    Par défaut



    Ca y est ! j'ai enfin pu afficher les polices ......

    J'ai finalement copié les fichiers woof, woff2 dans les dossier "vues" où je mets normalement les vues.
    J'ai ensuite copié le code css du @font face dans un fichier séparé et l'ai mis aussi dans le dossier "vues".

    Du coup, les chemins ne contiennent que les noms de fichiers sans chemins.

    Le fichier css qui se trouve dans le dossier css :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    #contact_titre {
    	font-family: 'shojumaruregular';
    	text-shadow: 5px 5px 15px #c90016;
    	font-size:10vw;
    }
    et le fichier css séparé contenant le @font face et qui se trouve dans le dossier "vues" :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    @font-face {
        font-family: 'shojumaruregular';
        src: url('shojumaru-regular-webfont.woff2') format('woff2'),
             url('shojumaru-regular-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }
    C'est pas trop tôt !!!!

  5. #5
    Membre confirmé
    Homme Profil pro
    Retraité informatique
    Inscrit en
    juin 2012
    Messages
    404
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Retraité informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : juin 2012
    Messages : 404
    Points : 535
    Points
    535

    Par défaut

    Ben honnêtement, ce n'est pas normal et source d'erreur et compliqué
    Je persiste à dire que c'est un problème de chemin et qu'il faudrait que tu maîtrises la différence entre chemin relatif et absolu.
    Quand tu utilises ../ cela veut dire que tu remontes l'arborescence des dossiers de ton site pour redescendre dans un autre dossier.
    Quelle galère, source de nombreuses erreurs et c'est sûr que l'on peut se tromper.

    Alors que si la page html est faite pour être vu via un serveur comme toutes pages d'un site, il faut utiliser le chemin absolu.
    Dans ce cas où que tu sois dans n'importe quels dossiers de ton site, le chemin absolu sera reconnu.

  6. #6
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 586
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 586
    Points : 21 194
    Points
    21 194

    Par défaut

    Bonjour,


    @ JefReb
    Citation Envoyé par JefReb Voir le message
    ...il faudrait que tu maîtrises la différence entre chemin relatif et absolu...
    Un chemin relatif fonctionne très bien, à partir du moment où on sait ce qu'on fait.
    Encore faudrait-il que tu maitrises toi-même...

    Ici, le Chemin relatif doit être celui entre :
    • le fichier CSS lui-même (et PAS la page dans lequel il est inclus !)
    • et les fichiers de fonts

    Si je me réfère à l'arborescence montrée (dossiers "css" et "utility" au même niveau), alors '../utility/.....' est correct.

    L'erreur était le 2ème src:..... en trop dans le 1er code montré.
    De plus, .ttf est 'truetype' :

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    @font-face {
        font-family: 'shojumaruregular';
        src: url('../utility/shojumaru-regular-webfont.ttf') format('truetype'),
             url('../utility/shojumaru-regular-webfont.woff2') format('woff2'),
             url('../utility/shojumaru-regular-webfont.woff') format('woff');
     
        font-weight: normal;
        font-style: normal;
    }
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  7. #7
    Membre confirmé
    Homme Profil pro
    Retraité informatique
    Inscrit en
    juin 2012
    Messages
    404
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Retraité informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : juin 2012
    Messages : 404
    Points : 535
    Points
    535

    Par défaut

    Jérôme, je suis tout à fait d'accord avec ce que tu écris.
    Je n'ai pas vu que le 2ème src.. était en trop. C'est vrai que je réponds parfois un peu vite
    Mais quoiqu'il en soit,

    Un chemin relatif fonctionne très bien, à partir du moment où on sait ce qu'on fait.
    Encore faudrait-il que tu maitrises toi-même...
    Je maîtrise très bien les chemins relatifs et absolutes, et je suis toujours très étonné que beaucoup utilisent le chemin relatif, toujours très difficile à maîtriser dans certains cas, plutôt que le chemin absolute.
    Je pense pour l'avoir demandé avec mes participants qui ne comprennent toujours tout l'intérêt.

    Dans un site super simple avec des dossiers uniquement à la racine, cela ne pose pas trop de problèmes.
    Mais quand vous avez un site avec dossiers et nombreux sous dossiers, il devient difficile sinon très difficile de définir un chemin en relatif dans un dossier (CSS) contenant les styles extérieurs.

  8. #8
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 586
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 586
    Points : 21 194
    Points
    21 194

    Par défaut

    Quand on range bien ses affaires, on les retrouve facilement.

    Dans un fichier CSS, TOUTES les URLs peuvent être relative.

    Le secret est là :
    Dans un fichier CSS, le chemin relatif doit être celui entre :
    • le fichier CSS lui-même (et PAS la page dans lequel il est inclus !)
    • et les fichiers de fonts (ou images pour background, icones,...)
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  9. #9
    Membre confirmé
    Homme Profil pro
    Développeur informatique
    Inscrit en
    février 2008
    Messages
    744
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Électronique et micro-électronique

    Informations forums :
    Inscription : février 2008
    Messages : 744
    Points : 564
    Points
    564

    Par défaut

    Bonjour !

    Merci à vous d'approfondir le sujet !

    Donc, si je comprends bien :
    mes chemins "../utility/..." étaient bons
    par contre il ne faut pas la deuxième src :
    L'erreur était le 2ème src:..... en trop dans le 1er code montré.
    Il est vrai que j'avais mis un deuxième src contenant le .ttf, mais j'ai modifié/actualisé le premier message et cette src a sauté. Est-ce de cela dont tu veux parler ? ou bien parles-tu du deuxième url dans le src (celui déclarant le woff2) ?

    d'autre part, la configuration actuelle du projet est que j'ai copié tous les fichiers relatifs à la police dans le dossier "vues" (ce que je ne souhaite pas en réalité mais je n'arrive pas à paramétrer les chemins des url) et j'ai paramétré les url sans chemins, c'est à dire juste avec les noms de fichiers. Ce qui montre que le dossier racine est le dossier "vues" ... êtes-vous en accord avec cette affirmation ?
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    src: url('shojumaru-regular-webfont.woff2') format('woff2'),
             url('shojumaru-regular-webfont.woff') format('woff');
    Merci à vous,


  10. #10
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 586
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 586
    Points : 21 194
    Points
    21 194

    Par défaut

    Non.

    J'ai mis le code nécessaire dans ta configuration initiale.
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  11. #11
    Membre confirmé
    Homme Profil pro
    Retraité informatique
    Inscrit en
    juin 2012
    Messages
    404
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Retraité informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : juin 2012
    Messages : 404
    Points : 535
    Points
    535

    Par défaut

    Jérôme, je suis quand même obligé de répondre.
    OUI, bien sûr que l'on peut toujours utiliser le chemin relatif.
    Mais même avec des dossiers bien ordonnés, le chemin absolute est quand même plus facile.

    Alors, oui, avec un chemin absolute, on ne peut pas l'exécuter directement sur son navigateur, il faut passer par un serveur qui saura résoudre le chemin absolute.
    Mais, si l'on travaille en Php, par exemple, on est obligé de toute façon à passer par un serveur.
    D'où mes réponses, et je persiste à dire, comme je l'ai vu une fois, qu'il est plus simple d'écrire
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <img src="/divers/images/logo.jpg">
    que
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <img src="../../divers/images/logo.jpg">

  12. #12
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 586
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 586
    Points : 21 194
    Points
    21 194

    Par défaut

    @JefReb
    1- Tu n'es pas développeur, et a donc une vision très partielle du développement.

    Même sur serveur, on a aussi besoin que les codes soient facilement portables, et que les fichiers/dossiers puissent se mettre dans un autre dossier que la racine.

    Dans le cas qui nous intéresse, prenons cette arborescence :
    -dossier "template"
    --dossier "css" (fichier de style CSS)
    --dossier "fonts" (polices de caractères)
    --dossier "img" (images utiles pour les background)

    Avec des chemins relatifs (dans le fichier CSS), on peut mettre le dossier "template" dans n'importe quel autre dossier (pas forcément à la racine), et les URL fonctionneront quand même.
    Avec des chemins absolus, il faudra modifier le fichier CSS pour ajouter partout ce nouveau dossier intermédiaire.

    Exemple de code CSS :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    /* ---------------- typos --------------- */
    @font-face { /* Raleway */
     font-family: 'Raleway';
     src: url('../fonts/Raleway/raleway-regular-webfont.eot?#iefix') format('embedded-opentype'),
       url('../fonts/Raleway/raleway-regular-webfont.woff') format('woff'),
       url('../fonts/Raleway/raleway-regular-webfont.ttf') format('truetype'),
       url('../fonts/Raleway/raleway-regular-webfont.svg#Raleway') format('svg');
     font-weight: normal;
     font-style: normal;
    }
     
    /* -------------------------------------- */
    a.extLink { background:url(../img/icones/ico16_web_link.png) 0 4px no-repeat; padding-left:18px; overflow:hidden; }
    a.email { background:url(../img/icones/ico16_email_link.png) 0 0 no-repeat; padding-left:18px; }


    2- Tu montres le code d'une image (balise <img>), qui n'a pas de rapport avec la discussion, puisqu'on parle du fichier CSS...
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <img src="/divers/images/logo.jpg">
    Citation Envoyé par JefReb Voir le message
    ...avec un chemin absolute, on ne peut pas l'exécuter directement sur son navigateur...
    Je vais t'en apprendre une bien bonne : ON PEUT l'afficher AUSSI EN LOCAL !

    Il existe la balise <base>, qui permet de définir l'URL de base !

    href
    L'URL de base à utiliser afin de recomposer les URL relatives contenues dans le document. Si cet attribut est défini, cet élément doit être présent avant les éléments dont les attributs sont des URL.
    Les URI absolues et relatives sont autorisées (voir la note ci-après).
    En local, tu pourras donc indiquer (dans le <head> de la page) :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <base href="http://localhost:8080/monsitelocal/">
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  13. #13
    Membre confirmé
    Homme Profil pro
    Retraité informatique
    Inscrit en
    juin 2012
    Messages
    404
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Retraité informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : juin 2012
    Messages : 404
    Points : 535
    Points
    535

    Par défaut

    Bon d'accord, je ne suis pas développeur et ma réponse n'était pas lié au css.
    Pour la balise <base> alors là oui j'apprends. Comme quoi il n'y a pas d'age.
    Aller à bientôt sur un autre post et merci pour les explications toujours aussi claires.

  14. #14
    Membre confirmé
    Homme Profil pro
    Développeur informatique
    Inscrit en
    février 2008
    Messages
    744
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Électronique et micro-électronique

    Informations forums :
    Inscription : février 2008
    Messages : 744
    Points : 564
    Points
    564

    Par défaut

    Yeap !

    Donc, c'est intéressant cette balise <BASE> !

    Me conseillez-vous de l'utiliser ? ou est-ce du superflux ?

    D'autre part, je souhaiterias une précision sur les deux points dans les url :
    Est-ce que ces deux points signifient :
    1. je remonte en arrière dans l'arboressence par rapport au dossier dans lequel se situe le fichier dans lequel l'url est décrite ?
    2. que l'url décrite démarre depuis le dossier racine du projet ?

    Moi, quand j'utilise ces deux points, je les utilise en pensant que je remonte d'un fichier dans l'arborescence. comme la commande shell suivante Merci

  15. #15
    Membre confirmé
    Homme Profil pro
    Retraité informatique
    Inscrit en
    juin 2012
    Messages
    404
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Retraité informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : juin 2012
    Messages : 404
    Points : 535
    Points
    535

    Par défaut

    En position relative (j'ai très peur de Jérôme ... ), d'après ce que j'ai pu lire et comprendre, le point veut dire "Là où je suis"
    Donc de là où je suis pour aller dans un répertoire au dessous il faut faire:
    ou plus simplement sans point et sans /:

    Si on veut remonter dans l'arborescence, il faut rajouter un point:
    et ainsi de suite. ça peut devenir pénible si le site est mal structuré et ordonné, pour remonter encore d'un cran comme

    Mais comme dit Jérôme, je ne suis qu'un développeur occasionnel et bénévole et je préfère utiliser le chemin absolu qui part de la racine avec seulement un /
    comme:
    Au moins je n'ai pas à me casser la tête. Mais peut être que quelque chose m'échappe, donc, c'est vous qui voyez ...

  16. #16
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 586
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 586
    Points : 21 194
    Points
    21 194

    Par défaut

    Citation Envoyé par JefReb Voir le message
    En position relative (j'ai très peur de Jérôme ... )
    Oui, tu peux avoir peur !

    Pour le reste, chacun est libre de coder comme bon lui semble, du moment que ça lui convient.


    Quant aux explications, une simple recherche permet de trouver des réponses :

    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  17. #17
    Membre confirmé
    Homme Profil pro
    Développeur informatique
    Inscrit en
    février 2008
    Messages
    744
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Électronique et micro-électronique

    Informations forums :
    Inscription : février 2008
    Messages : 744
    Points : 564
    Points
    564

    Par défaut

    Ah ok ! merci

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Utiliser une police personnalisée avec @font-face
    Par Jean Sympa dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 07/07/2015, 12h15
  2. Utilisation de @font-face
    Par TroisR dans le forum Mise en page CSS
    Réponses: 18
    Dernier message: 07/01/2015, 07h00
  3. comment utiliser font face et un fichier ttf ?
    Par ml1234 dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 09/05/2010, 10h40
  4. utilisation @font-face{} dans une feuille CSS
    Par bigjeef dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 30/10/2007, 00h25
  5. Réponses: 8
    Dernier message: 28/01/2005, 09h28

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo