| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | import { getAction, deleteAction, putAction, postAction, httpAction } from '@/api/manage' |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | // è·åæçæ°æ® |
|---|
| | | getEfficiencyDataApi: () => getAction('/outer/bigScreen/findDataByLastWeek'), |
|---|
| | | // è·åå
¨åæ¥è¦ä¿¡æ¯ |
|---|
| | | getWorkshopAlarmInfoApi: () => getAction('/outer/bigScreen/findAlarmInfo'), |
|---|
| | | // è·åå
¨åå½å设å¤ç¶æ |
|---|
| | | getWorkshopEquipmentStatusApi: () => getAction('/outer/bigScreen/findAllEquipmentStatus'), |
|---|
| | | // è·åå½å设å¤ç¶æ(设å¤å¸å±å¾) |
|---|
| | | getEquipmentStatusApi: () => getAction('/outer/bigScreen/findEquipmentStatus'), |
|---|
| | | // è·ååä¸å¤©å©ç¨çæå |
|---|
| | | getUtilizationRateRankApi: () => getAction('/outer/bigScreen/findDataRankingByLastWeek') |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <!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: 'ds-digitalnormal'; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | |
|---|
| | | <title>DS-Digital Normal 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"> |
|---|
| | | DS-Digital Normal </div> |
|---|
| | | <ul class="tabs"> |
|---|
| | | <li><a href="#specimen">Specimen</a></li> |
|---|
| | | <li><a href="#layout">Sample Layout</a></li> |
|---|
| | | <li><a href="#glyphs">Glyphs & 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​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;</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">◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼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>DS-Digital Normal</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 DS-Digital Normal in this kit supports the following languages:<br /> |
|---|
| | | |
|---|
| | | English, Arrernte, Bislama, Cebuano, Fijian, Gilbertese, Hmong, Ibanag, Iloko_ilokano, Interglossa_glosa, Interlingua, Lojban, Norfolk_pitcairnese, Oromo, Rotokas, Seychelles_creole, Shona, Somali, Southern_ndebele, Swahili, Swati_swazi, Tok_pisin, Warlpiri, Xhosa, Zulu, Latinbasic, Ubasic, Demo </p> |
|---|
| | | <h1>Glyph Chart</h1> |
|---|
| | | <p>The subset of DS-Digital Normal 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>&#13;</p> </div> |
|---|
| | | <div><p>&#32;</p> </div> |
|---|
| | | <div><p>&#33;</p>!</div> |
|---|
| | | <div><p>&#34;</p>"</div> |
|---|
| | | <div><p>&#35;</p>#</div> |
|---|
| | | <div><p>&#36;</p>$</div> |
|---|
| | | <div><p>&#37;</p>%</div> |
|---|
| | | <div><p>&#38;</p>&</div> |
|---|
| | | <div><p>&#39;</p>'</div> |
|---|
| | | <div><p>&#40;</p>(</div> |
|---|
| | | <div><p>&#41;</p>)</div> |
|---|
| | | <div><p>&#42;</p>*</div> |
|---|
| | | <div><p>&#43;</p>+</div> |
|---|
| | | <div><p>&#44;</p>,</div> |
|---|
| | | <div><p>&#45;</p>-</div> |
|---|
| | | <div><p>&#46;</p>.</div> |
|---|
| | | <div><p>&#47;</p>/</div> |
|---|
| | | <div><p>&#48;</p>0</div> |
|---|
| | | <div><p>&#49;</p>1</div> |
|---|
| | | <div><p>&#50;</p>2</div> |
|---|
| | | <div><p>&#51;</p>3</div> |
|---|
| | | <div><p>&#52;</p>4</div> |
|---|
| | | <div><p>&#53;</p>5</div> |
|---|
| | | <div><p>&#54;</p>6</div> |
|---|
| | | <div><p>&#55;</p>7</div> |
|---|
| | | <div><p>&#56;</p>8</div> |
|---|
| | | <div><p>&#57;</p>9</div> |
|---|
| | | <div><p>&#58;</p>:</div> |
|---|
| | | <div><p>&#59;</p>;</div> |
|---|
| | | <div><p>&#60;</p><</div> |
|---|
| | | <div><p>&#61;</p>=</div> |
|---|
| | | <div><p>&#62;</p>></div> |
|---|
| | | <div><p>&#63;</p>?</div> |
|---|
| | | <div><p>&#64;</p>@</div> |
|---|
| | | <div><p>&#65;</p>A</div> |
|---|
| | | <div><p>&#66;</p>B</div> |
|---|
| | | <div><p>&#67;</p>C</div> |
|---|
| | | <div><p>&#68;</p>D</div> |
|---|
| | | <div><p>&#69;</p>E</div> |
|---|
| | | <div><p>&#70;</p>F</div> |
|---|
| | | <div><p>&#71;</p>G</div> |
|---|
| | | <div><p>&#72;</p>H</div> |
|---|
| | | <div><p>&#73;</p>I</div> |
|---|
| | | <div><p>&#74;</p>J</div> |
|---|
| | | <div><p>&#75;</p>K</div> |
|---|
| | | <div><p>&#76;</p>L</div> |
|---|
| | | <div><p>&#77;</p>M</div> |
|---|
| | | <div><p>&#78;</p>N</div> |
|---|
| | | <div><p>&#79;</p>O</div> |
|---|
| | | <div><p>&#80;</p>P</div> |
|---|
| | | <div><p>&#81;</p>Q</div> |
|---|
| | | <div><p>&#82;</p>R</div> |
|---|
| | | <div><p>&#83;</p>S</div> |
|---|
| | | <div><p>&#84;</p>T</div> |
|---|
| | | <div><p>&#85;</p>U</div> |
|---|
| | | <div><p>&#86;</p>V</div> |
|---|
| | | <div><p>&#87;</p>W</div> |
|---|
| | | <div><p>&#88;</p>X</div> |
|---|
| | | <div><p>&#89;</p>Y</div> |
|---|
| | | <div><p>&#90;</p>Z</div> |
|---|
| | | <div><p>&#91;</p>[</div> |
|---|
| | | <div><p>&#92;</p>\</div> |
|---|
| | | <div><p>&#93;</p>]</div> |
|---|
| | | <div><p>&#94;</p>^</div> |
|---|
| | | <div><p>&#95;</p>_</div> |
|---|
| | | <div><p>&#96;</p>`</div> |
|---|
| | | <div><p>&#97;</p>a</div> |
|---|
| | | <div><p>&#98;</p>b</div> |
|---|
| | | <div><p>&#99;</p>c</div> |
|---|
| | | <div><p>&#100;</p>d</div> |
|---|
| | | <div><p>&#101;</p>e</div> |
|---|
| | | <div><p>&#102;</p>f</div> |
|---|
| | | <div><p>&#103;</p>g</div> |
|---|
| | | <div><p>&#104;</p>h</div> |
|---|
| | | <div><p>&#105;</p>i</div> |
|---|
| | | <div><p>&#106;</p>j</div> |
|---|
| | | <div><p>&#107;</p>k</div> |
|---|
| | | <div><p>&#108;</p>l</div> |
|---|
| | | <div><p>&#109;</p>m</div> |
|---|
| | | <div><p>&#110;</p>n</div> |
|---|
| | | <div><p>&#111;</p>o</div> |
|---|
| | | <div><p>&#112;</p>p</div> |
|---|
| | | <div><p>&#113;</p>q</div> |
|---|
| | | <div><p>&#114;</p>r</div> |
|---|
| | | <div><p>&#115;</p>s</div> |
|---|
| | | <div><p>&#116;</p>t</div> |
|---|
| | | <div><p>&#117;</p>u</div> |
|---|
| | | <div><p>&#118;</p>v</div> |
|---|
| | | <div><p>&#119;</p>w</div> |
|---|
| | | <div><p>&#120;</p>x</div> |
|---|
| | | <div><p>&#121;</p>y</div> |
|---|
| | | <div><p>&#122;</p>z</div> |
|---|
| | | <div><p>&#123;</p>{</div> |
|---|
| | | <div><p>&#124;</p>|</div> |
|---|
| | | <div><p>&#125;</p>}</div> |
|---|
| | | <div><p>&#126;</p>~</div> |
|---|
| | | <div><p>&#160;</p> </div> |
|---|
| | | <div><p>&#173;</p>­</div> |
|---|
| | | <div><p>&#8192;</p> </div> |
|---|
| | | <div><p>&#8193;</p> </div> |
|---|
| | | <div><p>&#8194;</p> </div> |
|---|
| | | <div><p>&#8195;</p> </div> |
|---|
| | | <div><p>&#8196;</p> </div> |
|---|
| | | <div><p>&#8197;</p> </div> |
|---|
| | | <div><p>&#8198;</p> </div> |
|---|
| | | <div><p>&#8199;</p> </div> |
|---|
| | | <div><p>&#8200;</p> </div> |
|---|
| | | <div><p>&#8201;</p> </div> |
|---|
| | | <div><p>&#8202;</p> </div> |
|---|
| | | <div><p>&#8208;</p>‐</div> |
|---|
| | | <div><p>&#8209;</p>‑</div> |
|---|
| | | <div><p>&#8210;</p>‒</div> |
|---|
| | | <div><p>&#8211;</p>–</div> |
|---|
| | | <div><p>&#8212;</p>—</div> |
|---|
| | | <div><p>&#8216;</p>‘</div> |
|---|
| | | <div><p>&#8217;</p>’</div> |
|---|
| | | <div><p>&#8220;</p>“</div> |
|---|
| | | <div><p>&#8221;</p>”</div> |
|---|
| | | <div><p>&#8226;</p>•</div> |
|---|
| | | <div><p>&#8239;</p> </div> |
|---|
| | | <div><p>&#8287;</p> </div> |
|---|
| | | <div><p>&#9724;</p>◼</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><link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /></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>©2010-2017 Font Squirrel. All rights reserved.</p> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </body> |
|---|
| | | </html> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <?xml version="1.0" standalone="no"?> |
|---|
| | | <!--<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >--> |
|---|
| | | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"> |
|---|
| | | <metadata></metadata> |
|---|
| | | <defs> |
|---|
| | | <font id="ds-digitalnormal" horiz-adv-x="1003" > |
|---|
| | | <font-face units-per-em="2048" ascent="1638" descent="-410" /> |
|---|
| | | <missing-glyph horiz-adv-x="484" /> |
|---|
| | | <glyph horiz-adv-x="0" /> |
|---|
| | | <glyph unicode="
" horiz-adv-x="484" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="484" /> |
|---|
| | | <glyph unicode="	" horiz-adv-x="484" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="484" /> |
|---|
| | | <glyph unicode="!" horiz-adv-x="534" d="M197 -26v-140h140v140h-140zM197 166v372l88 88l52 -54v-546zM197 765v399l140 139v-573l-52 -52z" /> |
|---|
| | | <glyph unicode=""" horiz-adv-x="569" d="M112 1059v244h139v-244l-70 -69zM320 1059v244h140v-244l-71 -69z" /> |
|---|
| | | <glyph unicode="#" horiz-adv-x="1038" d="M24 490l69 69h147l71 -69l-71 -69h-147zM24 812l69 69h147l71 -69l-71 -69h-147zM266 179v216l71 69l69 -69v-216l-69 -71zM266 586v131l71 69l69 -69v-131l-69 -68zM266 907v218l71 70l69 -70v-218l-69 -69zM363 490l69 69h87l69 -69l-69 -69h-87zM363 812l69 69h87 l69 -69l-69 -69h-87zM546 179v216l68 69l69 -69v-216l-69 -71zM546 586v131l68 69l69 -69v-65v-66l-69 -68zM546 907v218l68 70l69 -70v-218l-69 -69zM640 490l69 69h149l69 -69l-69 -69h-149zM640 812l69 69h149l69 -69l-69 -69h-149z" /> |
|---|
| | | <glyph unicode="$" d="M112 69l69 71h547l69 -71l-69 -69h-547zM112 730v408l69 70l70 -70v-373l-87 -87zM190 652l69 69h486l70 -69l-70 -69h-486zM207 1234l69 69h547l69 -69l-69 -70h-547zM432 -34h140v-175l-71 -68l-69 68v175zM432 1337v175l69 69l71 -69v-175h-140zM754 166v372l88 88 l50 -54v-406l-69 -71z" /> |
|---|
| | | <glyph unicode="%" horiz-adv-x="1238" d="M112 892l69 -67l70 67v259l-70 70l-69 -70v-259zM207 795l69 71h148l69 -71l-69 -69h-148zM207 1247l69 69h148l69 -69l-69 -70h-148zM268 197l253 436l118 34l18 -71l-337 -589zM449 892v259l70 70l69 -70v-259l-69 -67zM633 830l251 436l192 50l-341 -584l-70 -21z M650 166l69 -67l70 67v258l-70 71l-69 -71v-258zM745 69l70 71h148l68 -71l-68 -69h-148zM745 521l70 69h148l68 -69l-68 -70h-148zM989 166v258l69 71l68 -71v-258l-68 -67z" /> |
|---|
| | | <glyph unicode="&" d="M112 166v406l52 54l87 -88v-372l-70 -71zM112 730v408l69 70l70 -70v-373l-87 -87zM190 652l69 69h486l70 -69l-70 -69h-486zM207 69l69 71h452l69 -71l-69 -69h-452zM207 1234l69 69h452l69 -69l-69 -70h-452zM754 166v372l88 88l50 -54v-406l-69 -71zM754 765v129 l69 70l69 -70v-164l-50 -52zM866 652l70 69l69 -69l-69 -69z" /> |
|---|
| | | <glyph unicode="'" horiz-adv-x="361" d="M112 1059v244h139v-244l-70 -69z" /> |
|---|
| | | <glyph unicode="(" horiz-adv-x="657" d="M112 166v406l52 54l87 -88v-372l-70 -71zM112 730v408l69 70l70 -70v-373l-87 -87zM207 69l69 71h130l140 -140h-270zM207 1234l69 69h270l-140 -139h-130z" /> |
|---|
| | | <glyph unicode=")" horiz-adv-x="657" d="M112 0l139 140h129l69 -71l-69 -69h-268zM112 1303h268l69 -69l-69 -70h-129zM406 166v372l87 88l53 -54v-406l-71 -71zM406 765v373l69 70l71 -70v-408l-53 -52z" /> |
|---|
| | | <glyph unicode="*" horiz-adv-x="809" d="M112 793l26 97l97 54h139l-76 -127l-91 -48zM112 1134l95 26l91 -52l76 -123h-139l-97 54zM335 694v107l69 128l69 -123v-112l-69 -68zM335 1125v109l69 69l69 -69v-109l-69 -125zM436 951l74 -124l93 -58l95 24l-26 99l-97 59h-139zM436 989l74 123l93 48l95 -26 l-26 -95l-97 -50h-139z" /> |
|---|
| | | <glyph unicode="+" horiz-adv-x="847" d="M112 652l69 69h147l70 -69l-70 -69h-147zM354 408v149l70 69l69 -69v-149l-69 -69zM354 747v147l70 70l69 -70v-147l-69 -69zM449 652l70 69h148l68 -69l-68 -69h-148z" /> |
|---|
| | | <glyph unicode="," horiz-adv-x="361" d="M112 140h139v-287l-70 -69l-69 69v287z" /> |
|---|
| | | <glyph unicode="-" horiz-adv-x="847" d="M112 652l69 69h486l68 -69l-68 -69h-486z" /> |
|---|
| | | <glyph unicode="." horiz-adv-x="361" d="M112 0v140h139v-140h-139z" /> |
|---|
| | | <glyph unicode="/" horiz-adv-x="942" d="M67 197l253 436l118 34l20 -71l-339 -589zM432 830l251 436l192 50l-341 -584l-70 -21z" /> |
|---|
| | | <glyph unicode="0" d="M112 26v546l52 54l87 -88v-372zM112 730v547l139 -139v-373l-87 -87zM138 0l138 140h452l138 -140h-728zM138 1303h728l-138 -139h-452zM754 166v372l88 88l50 -54v-546zM754 765v373l138 139v-547l-50 -52z" /> |
|---|
| | | <glyph unicode="1" horiz-adv-x="534" d="M197 166v372l88 88l52 -54v-546zM197 765v373l140 139v-547l-52 -52z" /> |
|---|
| | | <glyph unicode="2" d="M112 26v546l52 54l87 -88v-372zM138 0l138 140h452l138 -140h-728zM138 1303h728l-138 -139h-452zM190 652l69 69h486l70 -69l-70 -69h-486zM754 765v373l138 139v-547l-50 -52z" /> |
|---|
| | | <glyph unicode="3" d="M138 0l138 140h452l138 -140h-728zM138 1303h728l-138 -139h-452zM190 652l69 69h486l70 -69l-70 -69h-486zM754 166v372l88 88l50 -54v-546zM754 765v373l138 139v-547l-50 -52z" /> |
|---|
| | | <glyph unicode="4" d="M112 730v547l139 -139v-373l-87 -87zM190 652l69 69h486l70 -69l-70 -69h-486zM754 166v372l88 88l50 -54v-546zM754 765v373l138 139v-547l-50 -52z" /> |
|---|
| | | <glyph unicode="5" d="M112 730v547l139 -139v-373l-87 -87zM138 0l138 140h452l138 -140h-728zM138 1303h728l-138 -139h-452zM190 652l69 69h486l70 -69l-70 -69h-486zM754 166v372l88 88l50 -54v-546z" /> |
|---|
| | | <glyph unicode="6" d="M112 26v546l52 54l87 -88v-372zM112 730v547l139 -139v-373l-87 -87zM138 0l138 140h452l138 -140h-728zM138 1303h728l-138 -139h-452zM190 652l69 69h486l70 -69l-70 -69h-486zM754 166v372l88 88l50 -54v-546z" /> |
|---|
| | | <glyph unicode="7" d="M138 1303h728l-138 -139h-452zM754 166v372l88 88l50 -54v-546zM754 765v373l138 139v-547l-50 -52z" /> |
|---|
| | | <glyph unicode="8" d="M112 26v546l52 54l87 -88v-372zM112 730v547l139 -139v-373l-87 -87zM138 0l138 140h452l138 -140h-728zM138 1303h728l-138 -139h-452zM190 652l69 69h486l70 -69l-70 -69h-486zM754 166v372l88 88l50 -54v-546zM754 765v373l138 139v-547l-50 -52z" /> |
|---|
| | | <glyph unicode="9" d="M112 730v547l139 -139v-373l-87 -87zM138 0l138 140h452l138 -140h-728zM138 1303h728l-138 -139h-452zM190 652l69 69h486l70 -69l-70 -69h-486zM754 166v372l88 88l50 -54v-546zM754 765v373l138 139v-547l-50 -52z" /> |
|---|
| | | <glyph unicode=":" horiz-adv-x="448" d="M155 0v140h139v-140h-139zM155 946v139h139v-139h-139z" /> |
|---|
| | | <glyph unicode=";" horiz-adv-x="448" d="M155 140h139v-287l-69 -69l-70 69v287zM155 946v139h139v-139h-139z" /> |
|---|
| | | <glyph unicode="<" horiz-adv-x="737" d="M112 631h195l320 -318v-97h-98zM112 670l417 417h98v-98l-320 -319h-195z" /> |
|---|
| | | <glyph unicode="=" horiz-adv-x="847" d="M112 512l69 71h486l68 -71l-68 -69h-486zM112 791l69 69h486l68 -69l-68 -70h-486z" /> |
|---|
| | | <glyph unicode=">" horiz-adv-x="737" d="M112 205v98l318 319h197l-417 -417h-98zM112 979v99h98l417 -419h-197z" /> |
|---|
| | | <glyph unicode="?" d="M112 26v546l52 54l87 -88v-372zM112 -26v-140h139v140h-139zM112 1303h616l69 -69l-69 -70h-477zM190 652l69 69h486l70 -69l-70 -69h-486zM754 765v373l69 70l69 -70v-408l-50 -52z" /> |
|---|
| | | <glyph unicode="@" horiz-adv-x="1176" d="M112 166v406l52 54l87 -88v-372l-70 -71zM112 730v408l69 70l70 -70v-373l-87 -87zM207 69l69 71h722l69 -71l-69 -69h-722zM207 1234l69 69h763l-138 -139h-625zM285 443v356l52 52l87 -86v-322l-70 -69zM363 877l69 69h486l71 -69l-71 -69h-486zM380 348l69 69h452 l138 -140h-590zM927 443v322l88 86l52 -52v-496zM927 990v148l140 139v-322l-52 -52z" /> |
|---|
| | | <glyph unicode="A" d="M112 0v572l52 54l87 -88v-398zM112 730v547l139 -139v-373l-87 -87zM138 1303h728l-138 -139h-452zM190 652l69 69h486l70 -69l-70 -69h-486zM754 140v398l88 88l50 -54v-572zM754 765v373l138 139v-547l-50 -52z" /> |
|---|
| | | <glyph unicode="B" d="M112 26v546l52 54l87 -88v-372zM112 730v547l139 -139v-373l-87 -87zM138 0l138 140h452l69 -71l-69 -69h-590zM138 1303h590l69 -69l-69 -70h-452zM190 652l69 69h486l70 -69l-70 -69h-486zM754 166v372l88 88l50 -54v-406l-69 -71zM754 765v373l69 70l69 -70v-408 l-50 -52z" /> |
|---|
| | | <glyph unicode="C" d="M112 166v406l52 54l87 -88v-372l-70 -71zM112 730v408l69 70l70 -70v-373l-87 -87zM207 69l69 71h478l138 -140h-616zM207 1234l69 69h616l-138 -139h-478z" /> |
|---|
| | | <glyph unicode="D" d="M112 26v546l52 54l87 -88v-372zM112 730v547l139 -139v-373l-87 -87zM138 0l138 140h452l69 -71l-69 -69h-590zM138 1303h590l69 -69l-69 -70h-452zM754 166v372l88 88l50 -54v-406l-69 -71zM754 765v373l69 70l69 -70v-408l-50 -52z" /> |
|---|
| | | <glyph unicode="E" d="M112 26v546l52 54l87 -88v-372zM112 730v547l139 -139v-373l-87 -87zM138 0l138 140h478l138 -140h-754zM138 1303h754l-138 -139h-478zM190 652l69 69h486l70 -69l-70 -69h-486z" /> |
|---|
| | | <glyph unicode="F" d="M112 26v546l52 54l87 -88v-372zM112 730v547l139 -139v-373l-87 -87zM138 1303h754l-138 -139h-478zM190 652l69 69h486l70 -69l-70 -69h-486z" /> |
|---|
| | | <glyph unicode="G" d="M112 166v406l52 54l87 -88v-372l-70 -71zM112 730v408l69 70l70 -70v-373l-87 -87zM207 69l69 -69h452l69 69l-69 71h-452zM207 1234l69 69h590l-138 -139h-452zM519 652l69 69h157l70 -69l-70 -69h-157zM754 166v372l88 88l50 -54v-406l-69 -71z" /> |
|---|
| | | <glyph unicode="H" d="M112 0v572l52 54l87 -88v-398zM112 730v573l139 -139v-399l-87 -87zM190 652l69 69h486l70 -69l-70 -69h-486zM754 140v398l88 88l50 -54v-572zM754 765v399l138 139v-573l-50 -52z" /> |
|---|
| | | <glyph unicode="I" horiz-adv-x="534" d="M197 69v469l88 88l52 -54v-503l-71 -69zM197 765v469l69 69l71 -69v-504l-52 -52z" /> |
|---|
| | | <glyph unicode="J" d="M112 26v374l52 51l87 -86v-199zM138 0l138 140h452l138 -140h-728zM754 166v372l88 88l50 -54v-546zM754 765v399l138 139v-573l-50 -52z" /> |
|---|
| | | <glyph unicode="K" d="M112 0v572l52 54l87 -88v-398zM112 730v573l139 -139v-399l-87 -87zM190 652l69 69h486l70 -69l-70 -69h-486zM285 761v99l443 438h99v-99l-443 -438h-99zM754 140v398l88 88l50 -54v-572z" /> |
|---|
| | | <glyph unicode="L" d="M112 26v546l52 54l87 -88v-372zM112 730v573l139 -139v-399l-87 -87zM138 0l138 140h478l138 -140h-754z" /> |
|---|
| | | <glyph unicode="M" d="M112 0v572l52 54l87 -88v-398zM112 730v547l139 -139v-373l-87 -87zM138 1303h728l-138 -139h-452zM432 748v311l69 69l71 -69v-311l-71 -70zM754 140v398l88 88l50 -54v-572zM754 765v373l138 139v-547l-50 -52z" /> |
|---|
| | | <glyph unicode="N" d="M112 0v572l52 54l87 -88v-398zM112 730v573l139 -139v-399l-87 -87zM283 1063v101h99l339 -339v-99h-99zM754 140v398l88 88l50 -54v-572zM754 765v399l138 139v-573l-50 -52z" /> |
|---|
| | | <glyph unicode="O" d="M112 166l69 -71l70 71v372l-87 88l-52 -54v-406zM112 730v408l69 70l70 -70v-373l-87 -87zM207 69l69 71h452l69 -71l-69 -69h-452zM207 1234l69 69h452l69 -69l-69 -70h-452zM754 166v372l88 88l50 -54v-406l-69 -71zM754 765v373l69 70l69 -70v-408l-50 -52z" /> |
|---|
| | | <glyph unicode="P" d="M112 0v572l52 54l87 -88v-398zM112 730v547l139 -139v-373l-87 -87zM138 1303h590l69 -69l-69 -70h-452zM190 652l69 69h486l70 -69l-70 -69h-486zM754 765v373l69 70l69 -70v-408l-50 -52z" /> |
|---|
| | | <glyph unicode="Q" d="M112 166l69 -71l70 71v372l-87 88l-52 -54v-406zM112 730v408l69 70l70 -70v-373l-87 -87zM207 69l69 71h327l69 -71l-69 -69h-327zM207 1234l69 69h452l69 -69l-69 -70h-452zM629 166v98h99l164 -165v-99h-99zM754 289v249l88 88l50 -54v-283l-69 -69zM754 765v373 l69 70l69 -70v-408l-50 -52z" /> |
|---|
| | | <glyph unicode="R" d="M112 0v572l52 54l87 -88v-398zM112 730v547l139 -139v-373l-87 -87zM138 1303h590l69 -69l-69 -70h-452zM190 652l69 69h486l70 -69l-70 -69h-486zM346 449v98h99l447 -448v-99h-99zM754 765v373l69 70l69 -70v-408l-50 -52z" /> |
|---|
| | | <glyph unicode="S" d="M112 69l69 71h547l69 -71l-69 -69h-547zM112 730v408l69 70l70 -70v-373l-87 -87zM190 652l69 69h486l70 -69l-70 -69h-486zM207 1234l69 69h547l69 -69l-69 -70h-547zM754 166v372l88 88l50 -54v-406l-69 -71z" /> |
|---|
| | | <glyph unicode="T" d="M112 1303h780l-138 -139h-503zM432 69v400l87 88l53 -52v-436l-71 -69zM432 694v375l69 69l71 -69v-410l-53 -50z" /> |
|---|
| | | <glyph unicode="U" d="M112 166l69 -71l70 71v372l-87 88l-52 -54v-406zM112 730v573l139 -139v-399l-87 -87zM207 69l69 71h452l69 -71l-69 -69h-452zM754 166v372l88 88l50 -54v-406l-69 -71zM754 765v399l138 139v-573l-50 -52z" /> |
|---|
| | | <glyph unicode="V" d="M112 69l69 -69l70 69v469l-87 88l-52 -54v-503zM112 730v573l139 -139v-399l-87 -87zM276 69v99l456 458l110 1l-12 -102l-456 -456h-98zM754 765v399l138 139v-573l-50 -52z" /> |
|---|
| | | <glyph unicode="W" d="M112 26v546l52 54l87 -88v-372zM112 730v573l139 -139v-399l-87 -87zM138 0l138 140h452l138 -140h-728zM432 242v313l69 71l71 -71v-313l-71 -69zM754 166v372l88 88l50 -54v-546zM754 765v399l138 139v-573l-50 -52z" /> |
|---|
| | | <glyph unicode="X" d="M112 0v136l294 490h69v-153l-283 -473h-80zM112 1167v136h80l283 -473v-152h-69zM529 473v153h69l294 -490v-136h-80zM529 678v152l283 473h80v-136l-292 -489h-71z" /> |
|---|
| | | <glyph unicode="Y" d="M112 730l52 -52l87 87v399l-139 139v-573zM190 652l69 69h486l70 -69l-70 -69h-486zM207 69l69 71h452l69 -71l-69 -69h-452zM754 166v372l88 88l50 -54v-406l-69 -71zM754 765v399l138 139v-573l-50 -52z" /> |
|---|
| | | <glyph unicode="Z" d="M112 69l69 71h547l138 -140h-685zM112 173v97l281 356l74 7l17 -123l-270 -337h-102zM112 1303h711l69 -69l-69 -70h-572zM493 747l302 381h97v-102l-270 -339l-123 -15z" /> |
|---|
| | | <glyph unicode="[" horiz-adv-x="657" d="M112 26v546l52 54l87 -88v-372zM112 730v547l139 -139v-373l-87 -87zM138 0l138 140h130l140 -140h-408zM138 1303h408l-140 -139h-130z" /> |
|---|
| | | <glyph unicode="\" horiz-adv-x="942" d="M67 1316l190 -50l253 -436l-33 -119l-71 21zM486 596l17 71l119 -34l253 -436l-52 -190z" /> |
|---|
| | | <glyph unicode="]" horiz-adv-x="657" d="M112 0l139 140h129l139 -140h-407zM112 1303h407l-139 -139h-129zM406 166v372l87 88l53 -54v-546zM406 765v373l140 139v-547l-53 -52z" /> |
|---|
| | | <glyph unicode="^" horiz-adv-x="916" d="M112 879v98l324 326v-197l-227 -227h-97zM473 1106v197l331 -329v-101h-97z" /> |
|---|
| | | <glyph unicode="_" horiz-adv-x="828" d="M50 -277l69 68h590l71 -68l-71 -71h-590z" /> |
|---|
| | | <glyph unicode="`" horiz-adv-x="463" d="M112 1247l119 69l121 -210l-26 -95l-93 26z" /> |
|---|
| | | <glyph unicode="a" d="M112 0v572l52 54l87 -88v-398zM112 730v547l139 -139v-373l-87 -87zM138 1303h728l-138 -139h-452zM190 652l69 69h486l70 -69l-70 -69h-486zM754 140v398l88 88l50 -54v-572zM754 765v373l138 139v-547l-50 -52z" /> |
|---|
| | | <glyph unicode="b" d="M112 26v546l52 54l87 -88v-372zM112 730v547l139 -139v-373l-87 -87zM138 0l138 140h452l69 -71l-69 -69h-590zM138 1303h590l69 -69l-69 -70h-452zM190 652l69 69h486l70 -69l-70 -69h-486zM754 166v372l88 88l50 -54v-406l-69 -71zM754 765v373l69 70l69 -70v-408 l-50 -52z" /> |
|---|
| | | <glyph unicode="c" d="M112 166v406l52 54l87 -88v-372l-70 -71zM112 730v408l69 70l70 -70v-373l-87 -87zM207 69l69 71h478l138 -140h-616zM207 1234l69 69h616l-138 -139h-478z" /> |
|---|
| | | <glyph unicode="d" d="M112 26v546l52 54l87 -88v-372zM112 730v547l139 -139v-373l-87 -87zM138 0l138 140h452l69 -71l-69 -69h-590zM138 1303h590l69 -69l-69 -70h-452zM754 166v372l88 88l50 -54v-406l-69 -71zM754 765v373l69 70l69 -70v-408l-50 -52z" /> |
|---|
| | | <glyph unicode="e" d="M112 26v546l52 54l87 -88v-372zM112 730v547l139 -139v-373l-87 -87zM138 0l138 140h478l138 -140h-754zM138 1303h754l-138 -139h-478zM190 652l69 69h486l70 -69l-70 -69h-486z" /> |
|---|
| | | <glyph unicode="f" d="M112 26v546l52 54l87 -88v-372zM112 730v547l139 -139v-373l-87 -87zM138 1303h754l-138 -139h-478zM190 652l69 69h486l70 -69l-70 -69h-486z" /> |
|---|
| | | <glyph unicode="g" d="M112 166v406l52 54l87 -88v-372l-70 -71zM112 730v408l69 70l70 -70v-373l-87 -87zM207 69l69 -69h452l69 69l-69 71h-452zM207 1234l69 69h590l-138 -139h-452zM519 652l69 69h157l70 -69l-70 -69h-157zM754 166v372l88 88l50 -54v-406l-69 -71z" /> |
|---|
| | | <glyph unicode="h" d="M112 0v572l52 54l87 -88v-398zM112 730v573l139 -139v-399l-87 -87zM190 652l69 69h486l70 -69l-70 -69h-486zM754 140v398l88 88l50 -54v-572zM754 765v399l138 139v-573l-50 -52z" /> |
|---|
| | | <glyph unicode="i" horiz-adv-x="534" d="M197 69v469l88 88l52 -54v-503l-71 -69zM197 765v469l69 69l71 -69v-504l-52 -52z" /> |
|---|
| | | <glyph unicode="j" d="M112 26v374l52 51l87 -86v-199zM138 0l138 140h452l138 -140h-728zM754 166v372l88 88l50 -54v-546zM754 765v399l138 139v-573l-50 -52z" /> |
|---|
| | | <glyph unicode="k" d="M112 0v572l52 54l87 -88v-398zM112 730v573l139 -139v-399l-87 -87zM190 652l69 69h486l70 -69l-70 -69h-486zM285 761v99l443 438h99v-99l-443 -438h-99zM754 140v398l88 88l50 -54v-572z" /> |
|---|
| | | <glyph unicode="l" d="M112 26v546l52 54l87 -88v-372zM112 730v573l139 -139v-399l-87 -87zM138 0l138 140h478l138 -140h-754z" /> |
|---|
| | | <glyph unicode="m" d="M112 0v572l52 54l87 -88v-398zM112 730v547l139 -139v-373l-87 -87zM138 1303h728l-138 -139h-452zM432 748v311l69 69l71 -69v-311l-71 -70zM754 140v398l88 88l50 -54v-572zM754 765v373l138 139v-547l-50 -52z" /> |
|---|
| | | <glyph unicode="n" d="M112 0v572l52 54l87 -88v-398zM112 730v573l139 -139v-399l-87 -87zM283 1063v101h99l339 -339v-99h-99zM754 140v398l88 88l50 -54v-572zM754 765v399l138 139v-573l-50 -52z" /> |
|---|
| | | <glyph unicode="o" d="M112 166l69 -71l70 71v372l-87 88l-52 -54v-406zM112 730v408l69 70l70 -70v-373l-87 -87zM207 69l69 71h452l69 -71l-69 -69h-452zM207 1234l69 69h452l69 -69l-69 -70h-452zM754 166v372l88 88l50 -54v-406l-69 -71zM754 765v373l69 70l69 -70v-408l-50 -52z" /> |
|---|
| | | <glyph unicode="p" d="M112 0v572l52 54l87 -88v-398zM112 730v547l139 -139v-373l-87 -87zM138 1303h590l69 -69l-69 -70h-452zM190 652l69 69h486l70 -69l-70 -69h-486zM754 765v373l69 70l69 -70v-408l-50 -52z" /> |
|---|
| | | <glyph unicode="q" d="M112 166l69 -71l70 71v372l-87 88l-52 -54v-406zM112 730v408l69 70l70 -70v-373l-87 -87zM207 69l69 71h327l69 -71l-69 -69h-327zM207 1234l69 69h452l69 -69l-69 -70h-452zM629 166v98h99l164 -165v-99h-99zM754 289v249l88 88l50 -54v-283l-69 -69zM754 765v373 l69 70l69 -70v-408l-50 -52z" /> |
|---|
| | | <glyph unicode="r" d="M112 0v572l52 54l87 -88v-398zM112 730v547l139 -139v-373l-87 -87zM138 1303h590l69 -69l-69 -70h-452zM190 652l69 69h486l70 -69l-70 -69h-486zM346 449v98h99l447 -448v-99h-99zM754 765v373l69 70l69 -70v-408l-50 -52z" /> |
|---|
| | | <glyph unicode="s" d="M112 69l69 71h547l69 -71l-69 -69h-547zM112 730v408l69 70l70 -70v-373l-87 -87zM190 652l69 69h486l70 -69l-70 -69h-486zM207 1234l69 69h547l69 -69l-69 -70h-547zM754 166v372l88 88l50 -54v-406l-69 -71z" /> |
|---|
| | | <glyph unicode="t" d="M112 1303h780l-138 -139h-503zM432 69v400l87 88l53 -52v-436l-71 -69zM432 694v375l69 69l71 -69v-410l-53 -50z" /> |
|---|
| | | <glyph unicode="u" d="M112 166l69 -71l70 71v372l-87 88l-52 -54v-406zM112 730v573l139 -139v-399l-87 -87zM207 69l69 71h452l69 -71l-69 -69h-452zM754 166v372l88 88l50 -54v-406l-69 -71zM754 765v399l138 139v-573l-50 -52z" /> |
|---|
| | | <glyph unicode="v" d="M112 69l69 -69l70 69v469l-87 88l-52 -54v-503zM112 730v573l139 -139v-399l-87 -87zM276 69v99l456 458l110 1l-12 -102l-456 -456h-98zM754 765v399l138 139v-573l-50 -52z" /> |
|---|
| | | <glyph unicode="w" d="M112 26v546l52 54l87 -88v-372zM112 730v573l139 -139v-399l-87 -87zM138 0l138 140h452l138 -140h-728zM432 242v313l69 71l71 -71v-313l-71 -69zM754 166v372l88 88l50 -54v-546zM754 765v399l138 139v-573l-50 -52z" /> |
|---|
| | | <glyph unicode="x" d="M112 0v136l294 490h69v-153l-283 -473h-80zM112 1167v136h80l283 -473v-152h-69zM529 473v153h69l294 -490v-136h-80zM529 678v152l283 473h80v-136l-292 -489h-71z" /> |
|---|
| | | <glyph unicode="y" d="M112 730l52 -52l87 87v399l-139 139v-573zM190 652l69 69h486l70 -69l-70 -69h-486zM207 69l69 71h452l69 -71l-69 -69h-452zM754 166v372l88 88l50 -54v-406l-69 -71zM754 765v399l138 139v-573l-50 -52z" /> |
|---|
| | | <glyph unicode="z" d="M112 69l69 71h547l138 -140h-685zM112 173v97l281 356l74 7l17 -123l-270 -337h-102zM112 1303h711l69 -69l-69 -70h-572zM493 747l302 381h97v-102l-270 -339l-123 -15z" /> |
|---|
| | | <glyph unicode="{" horiz-adv-x="778" d="M67 652l71 69h128l71 -69l-71 -69h-128zM276 166v372l87 88l52 -54v-406l-69 -71zM276 765v373l70 70l69 -70v-408l-52 -52zM372 69l69 71h88l138 -140h-226zM372 1234l69 69h226l-138 -139h-88z" /> |
|---|
| | | <glyph unicode="|" horiz-adv-x="510" d="M188 -348v1651h136v-1651h-136z" /> |
|---|
| | | <glyph unicode="}" horiz-adv-x="778" d="M112 0l139 140h86l69 -71l-69 -69h-225zM112 1303h225l69 -69l-69 -70h-86zM363 166v406l52 54l86 -88v-372l-69 -71zM363 730v408l69 70l69 -70v-373l-86 -87zM441 652l69 69h130l69 -69l-69 -69h-130z" /> |
|---|
| | | <glyph unicode="~" horiz-adv-x="916" d="M112 484v177q37 43 78 62.5t87 19.5q76 0 196 -52q74 -32 134 -32q52 0 98.5 27t98.5 83v-184q-60 -80 -203 -80q-34 0 -62.5 3.5t-56.5 12t-97 41.5q-50 24 -85 24q-41 0 -84.5 -22t-103.5 -80z" /> |
|---|
| | | <glyph unicode="­" horiz-adv-x="847" d="M112 652l69 69h486l68 -69l-68 -69h-486z" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="790" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="1581" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="790" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="1581" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="527" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="395" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="263" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="263" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="197" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="316" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="87" /> |
|---|
| | | <glyph unicode="‐" horiz-adv-x="847" d="M112 652l69 69h486l68 -69l-68 -69h-486z" /> |
|---|
| | | <glyph unicode="‑" horiz-adv-x="847" d="M112 652l69 69h486l68 -69l-68 -69h-486z" /> |
|---|
| | | <glyph unicode="‒" horiz-adv-x="847" d="M112 652l69 69h486l68 -69l-68 -69h-486z" /> |
|---|
| | | <glyph unicode="–" horiz-adv-x="1038" d="M20 652l71 69h849l71 -69l-71 -69h-849z" /> |
|---|
| | | <glyph unicode="—" horiz-adv-x="1826" d="M20 652l71 69h1642l69 -69l-69 -69h-1642z" /> |
|---|
| | | <glyph unicode="‘" horiz-adv-x="361" d="M112 990v244l69 69l70 -69v-244h-139z" /> |
|---|
| | | <glyph unicode="’" horiz-adv-x="361" d="M112 1059v244h139v-244l-70 -69z" /> |
|---|
| | | <glyph unicode="“" horiz-adv-x="569" d="M112 990v244l69 69l70 -69v-244h-139zM320 990v244l69 69l71 -69v-244h-140z" /> |
|---|
| | | <glyph unicode="”" horiz-adv-x="569" d="M112 1059v244h139v-244l-70 -69zM320 1059v244h140v-244l-71 -69z" /> |
|---|
| | | <glyph unicode="•" d="M112 652q0 162 114.5 276.5t274.5 114.5q164 0 277.5 -114t113.5 -277q0 -162 -114.5 -276.5t-276.5 -114.5t-275.5 113.5t-113.5 277.5z" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="316" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="395" /> |
|---|
| | | <glyph unicode="◼" horiz-adv-x="1303" d="M0 0v1303h1303v-1303h-1303z" /> |
|---|
| | | </font> |
|---|
| | | </defs></svg> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <!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: 'ds-digitalbold'; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | |
|---|
| | | <title>DS-Digital Bold 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"> |
|---|
| | | DS-Digital Bold </div> |
|---|
| | | <ul class="tabs"> |
|---|
| | | <li><a href="#specimen">Specimen</a></li> |
|---|
| | | <li><a href="#layout">Sample Layout</a></li> |
|---|
| | | <li><a href="#glyphs">Glyphs & 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​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;</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">◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼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>DS-Digital Bold</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 DS-Digital Bold in this kit supports the following languages:<br /> |
|---|
| | | |
|---|
| | | English, Arrernte, Bislama, Cebuano, Fijian, Gilbertese, Hmong, Ibanag, Iloko_ilokano, Interglossa_glosa, Interlingua, Lojban, Norfolk_pitcairnese, Oromo, Rotokas, Seychelles_creole, Shona, Somali, Southern_ndebele, Swahili, Swati_swazi, Tok_pisin, Warlpiri, Xhosa, Zulu, Latinbasic, Ubasic, Demo </p> |
|---|
| | | <h1>Glyph Chart</h1> |
|---|
| | | <p>The subset of DS-Digital Bold 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>&#13;</p> </div> |
|---|
| | | <div><p>&#32;</p> </div> |
|---|
| | | <div><p>&#33;</p>!</div> |
|---|
| | | <div><p>&#34;</p>"</div> |
|---|
| | | <div><p>&#35;</p>#</div> |
|---|
| | | <div><p>&#36;</p>$</div> |
|---|
| | | <div><p>&#37;</p>%</div> |
|---|
| | | <div><p>&#38;</p>&</div> |
|---|
| | | <div><p>&#39;</p>'</div> |
|---|
| | | <div><p>&#40;</p>(</div> |
|---|
| | | <div><p>&#41;</p>)</div> |
|---|
| | | <div><p>&#42;</p>*</div> |
|---|
| | | <div><p>&#43;</p>+</div> |
|---|
| | | <div><p>&#44;</p>,</div> |
|---|
| | | <div><p>&#45;</p>-</div> |
|---|
| | | <div><p>&#46;</p>.</div> |
|---|
| | | <div><p>&#47;</p>/</div> |
|---|
| | | <div><p>&#48;</p>0</div> |
|---|
| | | <div><p>&#49;</p>1</div> |
|---|
| | | <div><p>&#50;</p>2</div> |
|---|
| | | <div><p>&#51;</p>3</div> |
|---|
| | | <div><p>&#52;</p>4</div> |
|---|
| | | <div><p>&#53;</p>5</div> |
|---|
| | | <div><p>&#54;</p>6</div> |
|---|
| | | <div><p>&#55;</p>7</div> |
|---|
| | | <div><p>&#56;</p>8</div> |
|---|
| | | <div><p>&#57;</p>9</div> |
|---|
| | | <div><p>&#58;</p>:</div> |
|---|
| | | <div><p>&#59;</p>;</div> |
|---|
| | | <div><p>&#60;</p><</div> |
|---|
| | | <div><p>&#61;</p>=</div> |
|---|
| | | <div><p>&#62;</p>></div> |
|---|
| | | <div><p>&#63;</p>?</div> |
|---|
| | | <div><p>&#64;</p>@</div> |
|---|
| | | <div><p>&#65;</p>A</div> |
|---|
| | | <div><p>&#66;</p>B</div> |
|---|
| | | <div><p>&#67;</p>C</div> |
|---|
| | | <div><p>&#68;</p>D</div> |
|---|
| | | <div><p>&#69;</p>E</div> |
|---|
| | | <div><p>&#70;</p>F</div> |
|---|
| | | <div><p>&#71;</p>G</div> |
|---|
| | | <div><p>&#72;</p>H</div> |
|---|
| | | <div><p>&#73;</p>I</div> |
|---|
| | | <div><p>&#74;</p>J</div> |
|---|
| | | <div><p>&#75;</p>K</div> |
|---|
| | | <div><p>&#76;</p>L</div> |
|---|
| | | <div><p>&#77;</p>M</div> |
|---|
| | | <div><p>&#78;</p>N</div> |
|---|
| | | <div><p>&#79;</p>O</div> |
|---|
| | | <div><p>&#80;</p>P</div> |
|---|
| | | <div><p>&#81;</p>Q</div> |
|---|
| | | <div><p>&#82;</p>R</div> |
|---|
| | | <div><p>&#83;</p>S</div> |
|---|
| | | <div><p>&#84;</p>T</div> |
|---|
| | | <div><p>&#85;</p>U</div> |
|---|
| | | <div><p>&#86;</p>V</div> |
|---|
| | | <div><p>&#87;</p>W</div> |
|---|
| | | <div><p>&#88;</p>X</div> |
|---|
| | | <div><p>&#89;</p>Y</div> |
|---|
| | | <div><p>&#90;</p>Z</div> |
|---|
| | | <div><p>&#91;</p>[</div> |
|---|
| | | <div><p>&#92;</p>\</div> |
|---|
| | | <div><p>&#93;</p>]</div> |
|---|
| | | <div><p>&#94;</p>^</div> |
|---|
| | | <div><p>&#95;</p>_</div> |
|---|
| | | <div><p>&#96;</p>`</div> |
|---|
| | | <div><p>&#97;</p>a</div> |
|---|
| | | <div><p>&#98;</p>b</div> |
|---|
| | | <div><p>&#99;</p>c</div> |
|---|
| | | <div><p>&#100;</p>d</div> |
|---|
| | | <div><p>&#101;</p>e</div> |
|---|
| | | <div><p>&#102;</p>f</div> |
|---|
| | | <div><p>&#103;</p>g</div> |
|---|
| | | <div><p>&#104;</p>h</div> |
|---|
| | | <div><p>&#105;</p>i</div> |
|---|
| | | <div><p>&#106;</p>j</div> |
|---|
| | | <div><p>&#107;</p>k</div> |
|---|
| | | <div><p>&#108;</p>l</div> |
|---|
| | | <div><p>&#109;</p>m</div> |
|---|
| | | <div><p>&#110;</p>n</div> |
|---|
| | | <div><p>&#111;</p>o</div> |
|---|
| | | <div><p>&#112;</p>p</div> |
|---|
| | | <div><p>&#113;</p>q</div> |
|---|
| | | <div><p>&#114;</p>r</div> |
|---|
| | | <div><p>&#115;</p>s</div> |
|---|
| | | <div><p>&#116;</p>t</div> |
|---|
| | | <div><p>&#117;</p>u</div> |
|---|
| | | <div><p>&#118;</p>v</div> |
|---|
| | | <div><p>&#119;</p>w</div> |
|---|
| | | <div><p>&#120;</p>x</div> |
|---|
| | | <div><p>&#121;</p>y</div> |
|---|
| | | <div><p>&#122;</p>z</div> |
|---|
| | | <div><p>&#123;</p>{</div> |
|---|
| | | <div><p>&#124;</p>|</div> |
|---|
| | | <div><p>&#125;</p>}</div> |
|---|
| | | <div><p>&#126;</p>~</div> |
|---|
| | | <div><p>&#160;</p> </div> |
|---|
| | | <div><p>&#173;</p>­</div> |
|---|
| | | <div><p>&#8192;</p> </div> |
|---|
| | | <div><p>&#8193;</p> </div> |
|---|
| | | <div><p>&#8194;</p> </div> |
|---|
| | | <div><p>&#8195;</p> </div> |
|---|
| | | <div><p>&#8196;</p> </div> |
|---|
| | | <div><p>&#8197;</p> </div> |
|---|
| | | <div><p>&#8198;</p> </div> |
|---|
| | | <div><p>&#8199;</p> </div> |
|---|
| | | <div><p>&#8200;</p> </div> |
|---|
| | | <div><p>&#8201;</p> </div> |
|---|
| | | <div><p>&#8202;</p> </div> |
|---|
| | | <div><p>&#8208;</p>‐</div> |
|---|
| | | <div><p>&#8209;</p>‑</div> |
|---|
| | | <div><p>&#8210;</p>‒</div> |
|---|
| | | <div><p>&#8211;</p>–</div> |
|---|
| | | <div><p>&#8212;</p>—</div> |
|---|
| | | <div><p>&#8217;</p>’</div> |
|---|
| | | <div><p>&#8220;</p>“</div> |
|---|
| | | <div><p>&#8221;</p>”</div> |
|---|
| | | <div><p>&#8226;</p>•</div> |
|---|
| | | <div><p>&#8239;</p> </div> |
|---|
| | | <div><p>&#8287;</p> </div> |
|---|
| | | <div><p>&#9724;</p>◼</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><link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /></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>©2010-2017 Font Squirrel. All rights reserved.</p> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </body> |
|---|
| | | </html> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <?xml version="1.0" standalone="no"?> |
|---|
| | | <!--<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >--> |
|---|
| | | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"> |
|---|
| | | <metadata></metadata> |
|---|
| | | <defs> |
|---|
| | | <font id="ds-digitalbold" horiz-adv-x="1042" > |
|---|
| | | <font-face units-per-em="2048" ascent="1638" descent="-410" /> |
|---|
| | | <missing-glyph horiz-adv-x="484" /> |
|---|
| | | <glyph horiz-adv-x="0" /> |
|---|
| | | <glyph unicode="
" horiz-adv-x="484" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="484" /> |
|---|
| | | <glyph unicode="	" horiz-adv-x="484" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="484" /> |
|---|
| | | <glyph unicode="!" horiz-adv-x="584" d="M195 -88h194v-173h-194v173zM195 194v299l122 121l72 -72v-542zM195 810v298l194 195v-542l-72 -74z" /> |
|---|
| | | <glyph unicode=""" horiz-adv-x="633" d="M88 1044v259h193v-259l-97 -98zM350 1044v259h196v-259l-97 -98z" /> |
|---|
| | | <glyph unicode="#" horiz-adv-x="1238" d="M108 426l97 97h104l97 -97l-97 -96h-104zM108 789l97 97h104l97 -97l-97 -96h-104zM344 145v147l97 97l99 -97v-147l-99 -97zM344 559v98l97 97l99 -97v-98l-99 -97zM344 923v164l97 99l99 -99v-164l-99 -96zM478 426l97 97h88l97 -97l-97 -96h-88zM478 789l97 97h88 l97 -97l-97 -96h-88zM698 145v147l99 97l97 -97v-147l-97 -97zM698 559v98l99 97l97 -97v-98l-97 -97zM698 923v164l99 99l97 -99v-164l-97 -96zM832 426l97 97h104l97 -97l-97 -96h-104zM832 789l97 97h104l97 -97l-97 -96h-104z" /> |
|---|
| | | <glyph unicode="$" d="M108 97l97 97h499l97 -97l-97 -97h-499zM108 761v311l97 97l97 -97v-262l-121 -123zM218 652l97 96h413l97 -96l-97 -97h-413zM242 1206l97 97h497l97 -97l-97 -98h-497zM402 -43h194v-158l-97 -97l-97 97v158zM402 1346v156l97 97l97 -97v-156h-194zM739 231v262 l121 121l73 -72v-311l-97 -97z" /> |
|---|
| | | <glyph unicode="%" horiz-adv-x="1431" d="M108 920l97 -91l97 91v156l-97 99l-97 -99v-156zM242 788l97 96h102l99 -96l-99 -99h-102zM242 1210l97 99h102l99 -99l-99 -97h-102zM300 141l277 481l168 46l24 -100l-398 -691zM478 920v156l97 99l97 -99v-156l-97 -91zM735 896l254 437l264 71l-374 -648l-99 -24z M758 242l97 -91l98 91v149l-98 97l-97 -97v-149zM892 110l98 97h101l97 -97l-97 -97h-101zM892 523l98 99h101l97 -99l-97 -97h-101zM1128 242v149l97 97l97 -97v-149l-97 -91z" /> |
|---|
| | | <glyph unicode="&" horiz-adv-x="1113" d="M108 231v311l73 72l121 -121v-262l-97 -97zM108 761v311l97 97l97 -97v-262l-121 -123zM218 652l97 96h413l97 -96l-97 -97h-413zM242 97l97 97h365l97 -97l-97 -97h-365zM242 1206l97 97h365l97 -97l-97 -98h-365zM739 231v262l121 121l73 -72v-311l-97 -97zM739 810v78 l97 97l97 -97v-127l-73 -74zM897 652l97 96l97 -96l-97 -97z" /> |
|---|
| | | <glyph unicode="'" horiz-adv-x="368" d="M88 1044v259h193v-259l-97 -98z" /> |
|---|
| | | <glyph unicode="(" horiz-adv-x="642" d="M88 231l96 -97l97 97v262l-121 121l-72 -72v-311zM88 761v311l96 97l97 -97v-262l-121 -123zM220 97l98 97h86l196 -194h-282zM220 1206l98 97h282l-196 -195h-86z" /> |
|---|
| | | <glyph unicode=")" horiz-adv-x="642" d="M43 0l195 194h88l97 -97l-97 -97h-283zM43 1303h283l97 -97l-97 -98h-88zM361 231v262l123 121l73 -72v-311l-97 -97zM361 810v262l99 97l97 -97v-311l-73 -74z" /> |
|---|
| | | <glyph unicode="*" horiz-adv-x="996" d="M88 592l35 132l138 77h193l-106 -175l-128 -69zM88 1065l132 35l128 -70l106 -174h-193l-138 77zM400 451v149l97 180l99 -173v-156l-99 -97zM400 1054v152l97 97l99 -97v-152l-99 -177zM542 810l104 -175l129 -78l134 35l-38 132l-134 86h-195zM542 862l104 173l129 65 l134 -35l-38 -132l-134 -71h-195z" /> |
|---|
| | | <glyph unicode="+" horiz-adv-x="962" d="M88 652l96 96h164l97 -96l-97 -97h-164zM384 354v164l98 96l97 -96v-164l-97 -97zM384 786v164l98 96l97 -96v-164l-97 -99zM518 652l96 96h164l97 -96l-97 -97h-164z" /> |
|---|
| | | <glyph unicode="," horiz-adv-x="368" d="M88 -119v259h193v-259l-97 -97z" /> |
|---|
| | | <glyph unicode="-" horiz-adv-x="962" d="M88 652l96 96h594l97 -96l-97 -97h-594z" /> |
|---|
| | | <glyph unicode="." horiz-adv-x="368" d="M88 0v194h193v-194h-193z" /> |
|---|
| | | <glyph unicode="/" horiz-adv-x="1003" d="M45 188l245 419l168 43l26 -99l-367 -629zM449 881l245 422l269 69l-369 -631l-99 -26z" /> |
|---|
| | | <glyph unicode="0" d="M108 37v505l73 72l121 -121v-262zM108 761v505l194 -194v-262l-121 -123zM145 0l194 194h365l193 -194h-752zM145 1303h752l-193 -195h-365zM739 231v262l121 121l73 -72v-505zM739 810v262l194 194v-505l-73 -74z" /> |
|---|
| | | <glyph unicode="1" horiz-adv-x="584" d="M195 231v262l122 121l72 -72v-505zM195 810v262l194 194v-505l-72 -74z" /> |
|---|
| | | <glyph unicode="2" d="M108 37v505l73 72l121 -121v-262zM145 0l194 194h365l193 -194h-752zM145 1303h752l-193 -195h-365zM218 652l97 96h413l97 -96l-97 -97h-413zM739 810v262l194 194v-505l-73 -74z" /> |
|---|
| | | <glyph unicode="3" d="M145 0l194 194h365l193 -194h-752zM145 1303h752l-193 -195h-365zM218 652l97 96h413l97 -96l-97 -97h-413zM739 231v262l121 121l73 -72v-505zM739 810v262l194 194v-505l-73 -74z" /> |
|---|
| | | <glyph unicode="4" d="M108 761v505l194 -194v-262l-121 -123zM218 652l97 96h413l97 -96l-97 -97h-413zM739 231v262l121 121l73 -72v-505zM739 810v262l194 194v-505l-73 -74z" /> |
|---|
| | | <glyph unicode="5" d="M108 761v505l194 -194v-262l-121 -123zM145 0l194 194h365l193 -194h-752zM145 1303h752l-193 -195h-365zM218 652l97 96h413l97 -96l-97 -97h-413zM739 231v262l121 121l73 -72v-505z" /> |
|---|
| | | <glyph unicode="6" d="M108 37v505l73 72l121 -121v-262zM108 761v505l194 -194v-262l-121 -123zM145 0l194 194h365l193 -194h-752zM145 1303h752l-193 -195h-365zM218 652l97 96h413l97 -96l-97 -97h-413zM739 231v262l121 121l73 -72v-505z" /> |
|---|
| | | <glyph unicode="7" d="M145 1303h752l-193 -195h-365zM739 231v262l121 121l73 -72v-505zM739 810v262l194 194v-505l-73 -74z" /> |
|---|
| | | <glyph unicode="8" d="M108 37v505l73 72l121 -121v-262zM108 761v505l194 -194v-262l-121 -123zM145 0l194 194h365l193 -194h-752zM145 1303h752l-193 -195h-365zM218 652l97 96h413l97 -96l-97 -97h-413zM739 231v262l121 121l73 -72v-505zM739 810v262l194 194v-505l-73 -74z" /> |
|---|
| | | <glyph unicode="9" d="M108 761v505l194 -194v-262l-121 -123zM145 0l194 194h365l193 -194h-752zM145 1303h752l-193 -195h-365zM218 652l97 96h413l97 -96l-97 -97h-413zM739 231v262l121 121l73 -72v-505zM739 810v262l194 194v-505l-73 -74z" /> |
|---|
| | | <glyph unicode=":" horiz-adv-x="454" d="M130 0v194h196v-194h-196zM130 892v193h196v-193h-196z" /> |
|---|
| | | <glyph unicode=";" horiz-adv-x="454" d="M130 -119v259h196v-259l-99 -97zM130 892v193h196v-193h-196z" /> |
|---|
| | | <glyph unicode="<" horiz-adv-x="729" d="M88 624h273l281 -272v-136h-137zM88 676l417 411h137v-137l-281 -274h-273z" /> |
|---|
| | | <glyph unicode="=" horiz-adv-x="962" d="M88 486l96 97h594l97 -97l-97 -99h-594zM88 817l96 99h594l97 -99l-97 -96h-594z" /> |
|---|
| | | <glyph unicode=">" horiz-adv-x="729" d="M88 216v136l279 272h275l-417 -408h-137zM88 950v137h137l417 -411h-275z" /> |
|---|
| | | <glyph unicode="?" d="M108 0v542l73 72l121 -121v-299zM108 -73v-193h194v193h-194zM108 1303h596l97 -97l-97 -98h-402zM218 652l97 96h413l97 -96l-97 -97h-413zM739 810v262l97 97l97 -97v-311l-73 -74z" /> |
|---|
| | | <glyph unicode="@" horiz-adv-x="1260" d="M108 231v311l73 72l121 -121v-262l-97 -97zM108 761v311l97 97l97 -97v-262l-121 -123zM242 97l97 97h748l99 -97l-99 -97h-748zM242 1206l97 97h774l-193 -195h-581zM411 542v212l75 73l121 -121v-164l-97 -97zM523 864l97 97h324l97 -97l-97 -97h-324zM547 408l97 98 h276l193 -195h-469zM955 542v164l123 121l73 -73v-406zM955 1022v50l196 194v-292l-73 -75z" /> |
|---|
| | | <glyph unicode="A" d="M108 0v542l73 72l121 -121v-299zM108 761v505l194 -194v-262l-121 -123zM145 1303h752l-193 -195h-365zM218 652l97 96h413l97 -96l-97 -97h-413zM739 194v299l121 121l73 -72v-542zM739 810v262l194 194v-505l-73 -74z" /> |
|---|
| | | <glyph unicode="B" d="M108 37v505l73 72l121 -121v-262zM108 761v505l194 -194v-262l-121 -123zM145 0l194 194h365l97 -97l-97 -97h-559zM145 1303h559l97 -97l-97 -98h-365zM218 652l97 96h413l97 -96l-97 -97h-413zM739 231v262l121 121l73 -72v-311l-97 -97zM739 810v262l97 97l97 -97 v-311l-73 -74z" /> |
|---|
| | | <glyph unicode="C" d="M108 231l97 -97l97 97v262l-121 121l-73 -72v-311zM108 761v311l97 97l97 -97v-262l-121 -123zM242 97l97 97h400l194 -194h-594zM242 1206l97 97h594l-194 -195h-400z" /> |
|---|
| | | <glyph unicode="D" d="M108 37v505l73 72l121 -121v-262zM108 761v505l194 -194v-262l-121 -123zM145 0l194 194h365l97 -97l-97 -97h-559zM145 1303h559l97 -97l-97 -98h-365zM739 231v262l121 121l73 -72v-311l-97 -97zM739 810v262l97 97l97 -97v-311l-73 -74z" /> |
|---|
| | | <glyph unicode="E" d="M108 37v505l73 72l121 -121v-262zM108 761v505l194 -194v-262l-121 -123zM145 0l194 194h400l194 -194h-788zM145 1303h788l-194 -195h-400zM218 652l97 96h413l97 -96l-97 -97h-413z" /> |
|---|
| | | <glyph unicode="F" d="M108 37v505l73 72l121 -121v-262zM108 761v505l194 -194v-262l-121 -123zM145 1303h788l-194 -195h-400zM218 652l97 96h413l97 -96l-97 -97h-413z" /> |
|---|
| | | <glyph unicode="G" d="M108 231v339l73 72l121 -121v-290l-97 -97zM108 788v284l97 97l97 -97v-236l-121 -121zM242 97l97 -97h365l97 97l-97 97h-365zM242 1206l97 97h594l-194 -195h-400zM411 678l97 98h220l97 -98l-97 -97h-220zM739 231v290l121 121l73 -72v-339l-97 -97z" /> |
|---|
| | | <glyph unicode="H" d="M108 0v542l73 72l121 -121v-299zM108 761v542l194 -195v-298l-121 -123zM218 652l97 96h413l97 -96l-97 -97h-413zM739 194v299l121 121l73 -72v-542zM739 810v298l194 195v-542l-73 -74z" /> |
|---|
| | | <glyph unicode="I" horiz-adv-x="584" d="M195 194v299l122 121l72 -72v-542zM195 810v298l194 195v-542l-72 -74z" /> |
|---|
| | | <glyph unicode="J" d="M108 231l97 -97l97 97v175l-121 123l-73 -75v-223zM242 97l97 97h365l97 -97l-97 -97h-365zM739 231v262l121 121l73 -72v-311l-97 -97zM739 810v298l194 195v-542l-73 -74z" /> |
|---|
| | | <glyph unicode="K" d="M108 0v542l73 72l121 -121v-299zM108 761v542l194 -195v-298l-121 -123zM218 652l97 96h413l97 -96l-97 -97h-413zM350 801v139l365 363h138v-139l-365 -363h-138zM739 194v299l121 121l73 -72v-542z" /> |
|---|
| | | <glyph unicode="L" d="M108 37v505l73 72l121 -121v-262zM108 761v542l194 -195v-298l-121 -123zM145 0l194 194h400l194 -194h-788z" /> |
|---|
| | | <glyph unicode="M" d="M108 0v542l73 72l121 -121v-299zM108 761v505l194 -194v-262l-121 -123zM145 1303h752l-193 -195h-365zM430 585v381l99 97l97 -97v-381l-97 -99zM739 194v299l121 121l73 -72v-542zM739 810v262l194 194v-505l-73 -74z" /> |
|---|
| | | <glyph unicode="N" d="M108 0v542l73 72l121 -121v-299zM108 761v542l194 -195v-298l-121 -123zM160 1303h283l251 -266v-140h-137zM739 194v299l121 121l73 -72v-542zM739 810v298l194 195v-542l-73 -74z" /> |
|---|
| | | <glyph unicode="O" d="M108 231l97 -97l97 97v262l-121 121l-73 -72v-311zM108 761v311l97 97l97 -97v-262l-121 -123zM242 97l97 97h365l97 -97l-97 -97h-365zM242 1206l97 97h365l97 -97l-97 -98h-365zM739 231v262l121 121l73 -72v-311l-97 -97zM739 810v262l97 97l97 -97v-311l-73 -74z" /> |
|---|
| | | <glyph unicode="P" d="M108 0v542l73 72l121 -121v-299zM108 761v505l194 -194v-262l-121 -123zM145 1303h559l97 -97l-97 -98h-365zM218 652l97 96h413l97 -96l-97 -97h-413zM739 810v262l97 97l97 -97v-311l-73 -74z" /> |
|---|
| | | <glyph unicode="Q" d="M108 231l97 -97l97 97v288l-121 121l-73 -72v-337zM108 788v284l97 97l97 -97v-236l-121 -121zM242 97l97 97h190l97 -97l-97 -97h-190zM242 1206l97 97h365l97 -97l-97 -98h-365zM564 231v140h140l229 -231v-140h-138zM739 406v113l121 121l73 -72v-162l-97 -97z M739 836v236l97 97l97 -97v-284l-73 -73z" /> |
|---|
| | | <glyph unicode="R" d="M108 0v542l73 72l121 -121v-299zM108 761v505l194 -194v-262l-121 -123zM145 1303h559l97 -97l-97 -98h-365zM218 652l97 96h413l97 -96l-97 -97h-413zM389 372v138h140l372 -370v-140h-140zM739 810v262l97 97l97 -97v-311l-73 -74z" /> |
|---|
| | | <glyph unicode="S" d="M108 97l97 97h499l97 -97l-97 -97h-499zM108 761v311l97 97l97 -97v-262l-121 -123zM218 652l97 96h413l97 -96l-97 -97h-413zM242 1206l97 97h497l97 -97l-97 -98h-497zM739 231v262l121 121l73 -72v-311l-97 -97z" /> |
|---|
| | | <glyph unicode="T" d="M65 1206l97 97h717l98 -97l-98 -98h-717zM424 89v404l122 121l72 -72v-453l-97 -96zM424 810v149l97 97l97 -97v-198l-72 -74z" /> |
|---|
| | | <glyph unicode="U" d="M108 231l97 -97l97 97v262l-121 121l-73 -72v-311zM108 761v542l194 -195v-298l-121 -123zM242 97l97 97h365l97 -97l-97 -97h-365zM739 231v262l121 121l73 -72v-311l-97 -97zM739 810v298l194 195v-542l-73 -74z" /> |
|---|
| | | <glyph unicode="V" horiz-adv-x="999" d="M108 93v469l73 73l121 -123v-419l-97 -99zM108 780v523l194 -195v-278l-121 -123zM363 93v138l344 370l153 34l-13 -171l-346 -371h-138zM739 830v278l194 195v-523l-73 -73z" /> |
|---|
| | | <glyph unicode="W" d="M108 37v505l73 72l121 -121v-262zM108 761v542l194 -195v-298l-121 -123zM145 0l194 194h365l193 -194h-752zM430 335v384l99 98l97 -98v-384l-97 -97zM739 231v262l121 121l73 -72v-505zM739 810v298l194 195v-542l-73 -74z" /> |
|---|
| | | <glyph unicode="X" horiz-adv-x="999" d="M108 0v190l279 424h99v-214l-263 -400h-115zM108 1113v190h114l264 -402v-214h-99zM559 402v212h98l276 -424v-190h-112zM559 687v214l262 402h112v-190l-276 -426h-98z" /> |
|---|
| | | <glyph unicode="Y" d="M108 761l73 -74l121 123v298l-194 195v-542zM181 97l96 97h427l97 -97l-97 -97h-427zM218 652l97 96h413l97 -96l-97 -97h-413zM739 231v262l121 121l73 -72v-311l-97 -97zM739 810v298l194 195v-542l-73 -74z" /> |
|---|
| | | <glyph unicode="Z" d="M108 97l97 97h512l193 -194h-705zM108 1303h728l97 -97l-97 -98h-534zM205 238v134l177 261l104 9l22 -169l-158 -235h-145zM501 773l197 290h138v-143l-155 -231l-173 -19z" /> |
|---|
| | | <glyph unicode="[" horiz-adv-x="642" d="M88 37v505l72 72l121 -121v-262zM88 761v505l193 -194v-262l-121 -123zM123 0l195 194h86l196 -194h-477zM123 1303h477l-196 -195h-86z" /> |
|---|
| | | <glyph unicode="\" horiz-adv-x="1005" d="M43 1372l266 -69l248 -422l-47 -166l-99 26zM521 551l26 99l168 -43l244 -419l-71 -266z" /> |
|---|
| | | <glyph unicode="]" horiz-adv-x="642" d="M43 0l195 194h88l193 -194h-476zM43 1303h476l-193 -195h-88zM361 231v262l123 121l73 -72v-505zM361 810v262l196 194v-505l-73 -74z" /> |
|---|
| | | <glyph unicode="^" horiz-adv-x="949" d="M88 802v138l361 363v-275l-226 -226h-135zM499 1028v275l363 -363v-138h-138z" /> |
|---|
| | | <glyph unicode="_" horiz-adv-x="964" d="M0 -251l97 96h771l96 -96l-96 -97h-771z" /> |
|---|
| | | <glyph unicode="`" horiz-adv-x="495" d="M88 1247l165 99l155 -264l-36 -132l-132 35z" /> |
|---|
| | | <glyph unicode="a" d="M108 0v542l73 72l121 -121v-299zM108 761v505l194 -194v-262l-121 -123zM145 1303h752l-193 -195h-365zM218 652l97 96h413l97 -96l-97 -97h-413zM739 194v299l121 121l73 -72v-542zM739 810v262l194 194v-505l-73 -74z" /> |
|---|
| | | <glyph unicode="b" d="M108 37v505l73 72l121 -121v-262zM108 761v505l194 -194v-262l-121 -123zM145 0l194 194h365l97 -97l-97 -97h-559zM145 1303h559l97 -97l-97 -98h-365zM218 652l97 96h413l97 -96l-97 -97h-413zM739 231v262l121 121l73 -72v-311l-97 -97zM739 810v262l97 97l97 -97 v-311l-73 -74z" /> |
|---|
| | | <glyph unicode="c" d="M108 231l97 -97l97 97v262l-121 121l-73 -72v-311zM108 761v311l97 97l97 -97v-262l-121 -123zM242 97l97 97h400l194 -194h-594zM242 1206l97 97h594l-194 -195h-400z" /> |
|---|
| | | <glyph unicode="d" d="M108 37v505l73 72l121 -121v-262zM108 761v505l194 -194v-262l-121 -123zM145 0l194 194h365l97 -97l-97 -97h-559zM145 1303h559l97 -97l-97 -98h-365zM739 231v262l121 121l73 -72v-311l-97 -97zM739 810v262l97 97l97 -97v-311l-73 -74z" /> |
|---|
| | | <glyph unicode="e" d="M108 37v505l73 72l121 -121v-262zM108 761v505l194 -194v-262l-121 -123zM145 0l194 194h400l194 -194h-788zM145 1303h788l-194 -195h-400zM218 652l97 96h413l97 -96l-97 -97h-413z" /> |
|---|
| | | <glyph unicode="f" d="M108 37v505l73 72l121 -121v-262zM108 761v505l194 -194v-262l-121 -123zM145 1303h788l-194 -195h-400zM218 652l97 96h413l97 -96l-97 -97h-413z" /> |
|---|
| | | <glyph unicode="g" d="M108 231v339l73 72l121 -121v-290l-97 -97zM108 788v284l97 97l97 -97v-236l-121 -121zM242 97l97 -97h365l97 97l-97 97h-365zM242 1206l97 97h594l-194 -195h-400zM411 678l97 98h220l97 -98l-97 -97h-220zM739 231v290l121 121l73 -72v-339l-97 -97z" /> |
|---|
| | | <glyph unicode="h" d="M108 0v542l73 72l121 -121v-299zM108 761v542l194 -195v-298l-121 -123zM218 652l97 96h413l97 -96l-97 -97h-413zM739 194v299l121 121l73 -72v-542zM739 810v298l194 195v-542l-73 -74z" /> |
|---|
| | | <glyph unicode="i" horiz-adv-x="584" d="M195 194v299l122 121l72 -72v-542zM195 810v298l194 195v-542l-72 -74z" /> |
|---|
| | | <glyph unicode="j" d="M108 231l97 -97l97 97v175l-121 123l-73 -75v-223zM242 97l97 97h365l97 -97l-97 -97h-365zM739 231v262l121 121l73 -72v-311l-97 -97zM739 810v298l194 195v-542l-73 -74z" /> |
|---|
| | | <glyph unicode="k" d="M108 0v542l73 72l121 -121v-299zM108 761v542l194 -195v-298l-121 -123zM218 652l97 96h413l97 -96l-97 -97h-413zM350 801v139l365 363h138v-139l-365 -363h-138zM739 194v299l121 121l73 -72v-542z" /> |
|---|
| | | <glyph unicode="l" d="M108 37v505l73 72l121 -121v-262zM108 761v542l194 -195v-298l-121 -123zM145 0l194 194h400l194 -194h-788z" /> |
|---|
| | | <glyph unicode="m" d="M108 0v542l73 72l121 -121v-299zM108 761v505l194 -194v-262l-121 -123zM145 1303h752l-193 -195h-365zM430 585v381l99 97l97 -97v-381l-97 -99zM739 194v299l121 121l73 -72v-542zM739 810v262l194 194v-505l-73 -74z" /> |
|---|
| | | <glyph unicode="n" d="M108 0v542l73 72l121 -121v-299zM108 761v542l194 -195v-298l-121 -123zM160 1303h283l251 -266v-140h-137zM739 194v299l121 121l73 -72v-542zM739 810v298l194 195v-542l-73 -74z" /> |
|---|
| | | <glyph unicode="o" d="M108 231l97 -97l97 97v262l-121 121l-73 -72v-311zM108 761v311l97 97l97 -97v-262l-121 -123zM242 97l97 97h365l97 -97l-97 -97h-365zM242 1206l97 97h365l97 -97l-97 -98h-365zM739 231v262l121 121l73 -72v-311l-97 -97zM739 810v262l97 97l97 -97v-311l-73 -74z" /> |
|---|
| | | <glyph unicode="p" d="M108 0v542l73 72l121 -121v-299zM108 761v505l194 -194v-262l-121 -123zM145 1303h559l97 -97l-97 -98h-365zM218 652l97 96h413l97 -96l-97 -97h-413zM739 810v262l97 97l97 -97v-311l-73 -74z" /> |
|---|
| | | <glyph unicode="q" d="M108 231l97 -97l97 97v288l-121 121l-73 -72v-337zM108 788v284l97 97l97 -97v-236l-121 -121zM242 97l97 97h190l97 -97l-97 -97h-190zM242 1206l97 97h365l97 -97l-97 -98h-365zM564 231v140h140l229 -231v-140h-138zM739 406v113l121 121l73 -72v-162l-97 -97z M739 836v236l97 97l97 -97v-284l-73 -73z" /> |
|---|
| | | <glyph unicode="r" d="M108 0v542l73 72l121 -121v-299zM108 761v505l194 -194v-262l-121 -123zM145 1303h559l97 -97l-97 -98h-365zM218 652l97 96h413l97 -96l-97 -97h-413zM389 372v138h140l372 -370v-140h-140zM739 810v262l97 97l97 -97v-311l-73 -74z" /> |
|---|
| | | <glyph unicode="s" d="M108 97l97 97h499l97 -97l-97 -97h-499zM108 761v311l97 97l97 -97v-262l-121 -123zM218 652l97 96h413l97 -96l-97 -97h-413zM242 1206l97 97h497l97 -97l-97 -98h-497zM739 231v262l121 121l73 -72v-311l-97 -97z" /> |
|---|
| | | <glyph unicode="t" d="M65 1206l97 97h717l98 -97l-98 -98h-717zM424 89v404l122 121l72 -72v-453l-97 -96zM424 810v149l97 97l97 -97v-198l-72 -74z" /> |
|---|
| | | <glyph unicode="u" d="M108 231l97 -97l97 97v262l-121 121l-73 -72v-311zM108 761v542l194 -195v-298l-121 -123zM242 97l97 97h365l97 -97l-97 -97h-365zM739 231v262l121 121l73 -72v-311l-97 -97zM739 810v298l194 195v-542l-73 -74z" /> |
|---|
| | | <glyph unicode="v" horiz-adv-x="999" d="M108 93v469l73 73l121 -123v-419l-97 -99zM108 780v523l194 -195v-278l-121 -123zM363 93v138l344 370l153 34l-13 -171l-346 -371h-138zM739 830v278l194 195v-523l-73 -73z" /> |
|---|
| | | <glyph unicode="w" d="M108 37v505l73 72l121 -121v-262zM108 761v542l194 -195v-298l-121 -123zM145 0l194 194h365l193 -194h-752zM430 335v384l99 98l97 -98v-384l-97 -97zM739 231v262l121 121l73 -72v-505zM739 810v298l194 195v-542l-73 -74z" /> |
|---|
| | | <glyph unicode="x" horiz-adv-x="999" d="M108 0v190l279 424h99v-214l-263 -400h-115zM108 1113v190h114l264 -402v-214h-99zM559 402v212h98l276 -424v-190h-112zM559 687v214l262 402h112v-190l-276 -426h-98z" /> |
|---|
| | | <glyph unicode="y" d="M108 761l73 -74l121 123v298l-194 195v-542zM181 97l96 97h427l97 -97l-97 -97h-427zM218 652l97 96h413l97 -96l-97 -97h-413zM739 231v262l121 121l73 -72v-311l-97 -97zM739 810v298l194 195v-542l-73 -74z" /> |
|---|
| | | <glyph unicode="z" d="M108 97l97 97h512l193 -194h-705zM108 1303h728l97 -97l-97 -98h-534zM205 238v134l177 261l104 9l22 -169l-158 -235h-145zM501 773l197 290h138v-143l-155 -231l-173 -19z" /> |
|---|
| | | <glyph unicode="{" horiz-adv-x="804" d="M43 652l98 96h95l97 -96l-97 -97h-95zM249 231v262l122 121l72 -72v-311l-97 -97zM249 810v262l97 97l97 -97v-311l-72 -74zM382 97l96 97h88l195 -194h-283zM382 1206l96 97h283l-195 -195h-88z" /> |
|---|
| | | <glyph unicode="|" horiz-adv-x="646" d="M227 -348v1651h192v-1651h-192z" /> |
|---|
| | | <glyph unicode="}" horiz-adv-x="804" d="M43 0l195 194h88l97 -97l-97 -97h-283zM43 1303h283l97 -97l-97 -98h-88zM361 231v311l75 72l121 -121v-262l-97 -97zM361 761v311l99 97l97 -97v-262l-121 -123zM471 652l97 96h95l98 -96l-98 -97h-95z" /> |
|---|
| | | <glyph unicode="~" horiz-adv-x="867" d="M88 484v177q37 43 78 62.5t87 19.5q76 0 196 -52q74 -32 134 -32q52 0 98.5 27t98.5 83v-184q-60 -80 -203 -80q-34 0 -62.5 3.5t-56.5 12t-97 41.5q-50 24 -85 24q-41 0 -84.5 -22t-103.5 -80z" /> |
|---|
| | | <glyph unicode="­" horiz-adv-x="962" d="M88 652l96 96h594l97 -96l-97 -97h-594z" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="799" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="1599" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="799" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="1599" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="533" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="399" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="266" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="266" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="199" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="319" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="88" /> |
|---|
| | | <glyph unicode="‐" horiz-adv-x="962" d="M88 652l96 96h594l97 -96l-97 -97h-594z" /> |
|---|
| | | <glyph unicode="‑" horiz-adv-x="962" d="M88 652l96 96h594l97 -96l-97 -97h-594z" /> |
|---|
| | | <glyph unicode="‒" horiz-adv-x="962" d="M88 652l96 96h594l97 -96l-97 -97h-594z" /> |
|---|
| | | <glyph unicode="–" horiz-adv-x="955" d="M88 652q0 162 114.5 276.5t274.5 114.5q164 0 277.5 -114t113.5 -277q0 -162 -114.5 -276.5t-276.5 -114.5t-275.5 113.5t-113.5 277.5z" /> |
|---|
| | | <glyph unicode="—" horiz-adv-x="990" d="M-4 652l71 69h849l71 -69l-71 -69h-849z" /> |
|---|
| | | <glyph unicode="’" horiz-adv-x="368" d="M88 946v260l96 97l97 -97v-260h-193z" /> |
|---|
| | | <glyph unicode="“" horiz-adv-x="368" d="M88 1044v259h193v-259l-97 -98z" /> |
|---|
| | | <glyph unicode="”" horiz-adv-x="633" d="M88 946v260l96 97l97 -97v-260h-193zM350 946v260l99 97l97 -97v-260h-196z" /> |
|---|
| | | <glyph unicode="•" horiz-adv-x="633" d="M88 1044v259h193v-259l-97 -98zM350 1044v259h196v-259l-97 -98z" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="319" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="399" /> |
|---|
| | | <glyph unicode="◼" horiz-adv-x="1303" d="M0 0v1303h1303v-1303h-1303z" /> |
|---|
| | | </font> |
|---|
| | | </defs></svg> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <!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: 'ds-digitalitalic'; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | |
|---|
| | | <title>DS-Digital Italic 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"> |
|---|
| | | DS-Digital Italic </div> |
|---|
| | | <ul class="tabs"> |
|---|
| | | <li><a href="#specimen">Specimen</a></li> |
|---|
| | | <li><a href="#layout">Sample Layout</a></li> |
|---|
| | | <li><a href="#glyphs">Glyphs & 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​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;</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">◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼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>DS-Digital Italic</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 DS-Digital Italic in this kit supports the following languages:<br /> |
|---|
| | | |
|---|
| | | English, Arrernte, Bislama, Cebuano, Fijian, Gilbertese, Hmong, Ibanag, Iloko_ilokano, Interglossa_glosa, Interlingua, Lojban, Norfolk_pitcairnese, Oromo, Rotokas, Seychelles_creole, Shona, Somali, Southern_ndebele, Swahili, Swati_swazi, Tok_pisin, Warlpiri, Xhosa, Zulu, Latinbasic, Ubasic, Demo </p> |
|---|
| | | <h1>Glyph Chart</h1> |
|---|
| | | <p>The subset of DS-Digital Italic 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>&#13;</p> </div> |
|---|
| | | <div><p>&#32;</p> </div> |
|---|
| | | <div><p>&#33;</p>!</div> |
|---|
| | | <div><p>&#34;</p>"</div> |
|---|
| | | <div><p>&#35;</p>#</div> |
|---|
| | | <div><p>&#36;</p>$</div> |
|---|
| | | <div><p>&#37;</p>%</div> |
|---|
| | | <div><p>&#38;</p>&</div> |
|---|
| | | <div><p>&#39;</p>'</div> |
|---|
| | | <div><p>&#40;</p>(</div> |
|---|
| | | <div><p>&#41;</p>)</div> |
|---|
| | | <div><p>&#42;</p>*</div> |
|---|
| | | <div><p>&#43;</p>+</div> |
|---|
| | | <div><p>&#44;</p>,</div> |
|---|
| | | <div><p>&#45;</p>-</div> |
|---|
| | | <div><p>&#46;</p>.</div> |
|---|
| | | <div><p>&#47;</p>/</div> |
|---|
| | | <div><p>&#48;</p>0</div> |
|---|
| | | <div><p>&#49;</p>1</div> |
|---|
| | | <div><p>&#50;</p>2</div> |
|---|
| | | <div><p>&#51;</p>3</div> |
|---|
| | | <div><p>&#52;</p>4</div> |
|---|
| | | <div><p>&#53;</p>5</div> |
|---|
| | | <div><p>&#54;</p>6</div> |
|---|
| | | <div><p>&#55;</p>7</div> |
|---|
| | | <div><p>&#56;</p>8</div> |
|---|
| | | <div><p>&#57;</p>9</div> |
|---|
| | | <div><p>&#58;</p>:</div> |
|---|
| | | <div><p>&#59;</p>;</div> |
|---|
| | | <div><p>&#60;</p><</div> |
|---|
| | | <div><p>&#61;</p>=</div> |
|---|
| | | <div><p>&#62;</p>></div> |
|---|
| | | <div><p>&#63;</p>?</div> |
|---|
| | | <div><p>&#64;</p>@</div> |
|---|
| | | <div><p>&#65;</p>A</div> |
|---|
| | | <div><p>&#66;</p>B</div> |
|---|
| | | <div><p>&#67;</p>C</div> |
|---|
| | | <div><p>&#68;</p>D</div> |
|---|
| | | <div><p>&#69;</p>E</div> |
|---|
| | | <div><p>&#70;</p>F</div> |
|---|
| | | <div><p>&#71;</p>G</div> |
|---|
| | | <div><p>&#72;</p>H</div> |
|---|
| | | <div><p>&#73;</p>I</div> |
|---|
| | | <div><p>&#74;</p>J</div> |
|---|
| | | <div><p>&#75;</p>K</div> |
|---|
| | | <div><p>&#76;</p>L</div> |
|---|
| | | <div><p>&#77;</p>M</div> |
|---|
| | | <div><p>&#78;</p>N</div> |
|---|
| | | <div><p>&#79;</p>O</div> |
|---|
| | | <div><p>&#80;</p>P</div> |
|---|
| | | <div><p>&#81;</p>Q</div> |
|---|
| | | <div><p>&#82;</p>R</div> |
|---|
| | | <div><p>&#83;</p>S</div> |
|---|
| | | <div><p>&#84;</p>T</div> |
|---|
| | | <div><p>&#85;</p>U</div> |
|---|
| | | <div><p>&#86;</p>V</div> |
|---|
| | | <div><p>&#87;</p>W</div> |
|---|
| | | <div><p>&#88;</p>X</div> |
|---|
| | | <div><p>&#89;</p>Y</div> |
|---|
| | | <div><p>&#90;</p>Z</div> |
|---|
| | | <div><p>&#91;</p>[</div> |
|---|
| | | <div><p>&#92;</p>\</div> |
|---|
| | | <div><p>&#93;</p>]</div> |
|---|
| | | <div><p>&#94;</p>^</div> |
|---|
| | | <div><p>&#95;</p>_</div> |
|---|
| | | <div><p>&#96;</p>`</div> |
|---|
| | | <div><p>&#97;</p>a</div> |
|---|
| | | <div><p>&#98;</p>b</div> |
|---|
| | | <div><p>&#99;</p>c</div> |
|---|
| | | <div><p>&#100;</p>d</div> |
|---|
| | | <div><p>&#101;</p>e</div> |
|---|
| | | <div><p>&#102;</p>f</div> |
|---|
| | | <div><p>&#103;</p>g</div> |
|---|
| | | <div><p>&#104;</p>h</div> |
|---|
| | | <div><p>&#105;</p>i</div> |
|---|
| | | <div><p>&#106;</p>j</div> |
|---|
| | | <div><p>&#107;</p>k</div> |
|---|
| | | <div><p>&#108;</p>l</div> |
|---|
| | | <div><p>&#109;</p>m</div> |
|---|
| | | <div><p>&#110;</p>n</div> |
|---|
| | | <div><p>&#111;</p>o</div> |
|---|
| | | <div><p>&#112;</p>p</div> |
|---|
| | | <div><p>&#113;</p>q</div> |
|---|
| | | <div><p>&#114;</p>r</div> |
|---|
| | | <div><p>&#115;</p>s</div> |
|---|
| | | <div><p>&#116;</p>t</div> |
|---|
| | | <div><p>&#117;</p>u</div> |
|---|
| | | <div><p>&#118;</p>v</div> |
|---|
| | | <div><p>&#119;</p>w</div> |
|---|
| | | <div><p>&#120;</p>x</div> |
|---|
| | | <div><p>&#121;</p>y</div> |
|---|
| | | <div><p>&#122;</p>z</div> |
|---|
| | | <div><p>&#123;</p>{</div> |
|---|
| | | <div><p>&#124;</p>|</div> |
|---|
| | | <div><p>&#125;</p>}</div> |
|---|
| | | <div><p>&#126;</p>~</div> |
|---|
| | | <div><p>&#160;</p> </div> |
|---|
| | | <div><p>&#173;</p>­</div> |
|---|
| | | <div><p>&#8192;</p> </div> |
|---|
| | | <div><p>&#8193;</p> </div> |
|---|
| | | <div><p>&#8194;</p> </div> |
|---|
| | | <div><p>&#8195;</p> </div> |
|---|
| | | <div><p>&#8196;</p> </div> |
|---|
| | | <div><p>&#8197;</p> </div> |
|---|
| | | <div><p>&#8198;</p> </div> |
|---|
| | | <div><p>&#8199;</p> </div> |
|---|
| | | <div><p>&#8200;</p> </div> |
|---|
| | | <div><p>&#8201;</p> </div> |
|---|
| | | <div><p>&#8202;</p> </div> |
|---|
| | | <div><p>&#8208;</p>‐</div> |
|---|
| | | <div><p>&#8209;</p>‑</div> |
|---|
| | | <div><p>&#8210;</p>‒</div> |
|---|
| | | <div><p>&#8211;</p>–</div> |
|---|
| | | <div><p>&#8212;</p>—</div> |
|---|
| | | <div><p>&#8216;</p>‘</div> |
|---|
| | | <div><p>&#8217;</p>’</div> |
|---|
| | | <div><p>&#8220;</p>“</div> |
|---|
| | | <div><p>&#8221;</p>”</div> |
|---|
| | | <div><p>&#8226;</p>•</div> |
|---|
| | | <div><p>&#8239;</p> </div> |
|---|
| | | <div><p>&#8287;</p> </div> |
|---|
| | | <div><p>&#9724;</p>◼</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><link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /></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>©2010-2017 Font Squirrel. All rights reserved.</p> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </body> |
|---|
| | | </html> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <?xml version="1.0" standalone="no"?> |
|---|
| | | <!--<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >--> |
|---|
| | | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"> |
|---|
| | | <metadata></metadata> |
|---|
| | | <defs> |
|---|
| | | <font id="ds-digitalitalic" horiz-adv-x="1003" > |
|---|
| | | <font-face units-per-em="2048" ascent="1638" descent="-410" /> |
|---|
| | | <missing-glyph horiz-adv-x="484" /> |
|---|
| | | <glyph horiz-adv-x="0" /> |
|---|
| | | <glyph unicode="
" horiz-adv-x="484" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="484" /> |
|---|
| | | <glyph unicode="	" horiz-adv-x="484" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="484" /> |
|---|
| | | <glyph unicode="!" horiz-adv-x="534" d="M182 -166h140l13 140h-140zM212 166l32 372l95 88l48 -54l-48 -546zM264 765l36 399l151 139l-51 -573l-56 -52z" /> |
|---|
| | | <glyph unicode=""" horiz-adv-x="569" d="M205 1059l20 244h140l-21 -244l-76 -69zM413 1059l21 244h139l-20 -244l-76 -69z" /> |
|---|
| | | <glyph unicode="#" horiz-adv-x="1038" d="M67 490l74 69h148l65 -69l-77 -69h-147zM95 812l74 69h148l65 -69l-77 -69h-147zM281 179l21 216l76 69l63 -69l-20 -216l-75 -71zM318 586l12 131l76 69l63 -69l-11 -131l-76 -68zM346 907l19 218l76 70l64 -70l-19 -218l-76 -69zM406 490l74 69h88l63 -69l-74 -69h-88z M434 812l74 69h88l63 -69l-74 -69h-88zM560 179l21 216l74 69l64 -69l-21 -216l-74 -71zM598 586l11 131l74 69l64 -69l-6 -65l-6 -66l-76 -68zM626 907l18 218l75 70l63 -70l-19 -218l-76 -69zM683 490l75 69h149l63 -69l-74 -69h-149zM711 812l75 69h149l63 -69l-75 -69 h-148z" /> |
|---|
| | | <glyph unicode="$" d="M117 69l77 71h547l61 -71l-74 -69h-547zM175 730l35 408l77 70l63 -70l-32 -373l-95 -87zM248 652l74 69h486l65 -69l-78 -69h-486zM315 1234l74 69h547l64 -69l-75 -70h-547zM413 -209l15 175h140l-15 -175l-76 -68zM549 1337l15 175l75 69l65 -69l-15 -175h-140z M769 166l32 372l95 88l46 -54l-35 -406l-77 -71z" /> |
|---|
| | | <glyph unicode="%" horiz-adv-x="1238" d="M190 892l63 -67l77 67l22 259l-65 70l-75 -70zM276 795l76 71h149l61 -71l-74 -69h-149zM285 197l292 436l119 34l13 -71l-389 -589zM317 1247l74 69h149l63 -69l-76 -70h-149zM527 892l22 259l77 70l63 -70l-22 -259l-75 -67zM665 166l63 -67l76 67l23 258l-66 71 l-74 -71zM706 830l288 436l198 50l-393 -584l-73 -21zM750 69l79 71h147l61 -71l-74 -69h-148zM789 521l79 69h147l61 -69l-74 -70h-147zM1004 166l22 258l74 71l64 -71l-23 -258l-74 -67z" /> |
|---|
| | | <glyph unicode="&" d="M127 166l35 406l56 54l80 -88l-32 -372l-78 -71zM175 730l35 408l77 70l63 -70l-32 -373l-95 -87zM212 69l77 71h452l61 -71l-74 -69h-452zM248 652l74 69h486l65 -69l-78 -69h-486zM315 1234l74 69h453l63 -69l-75 -70h-452zM769 166l32 372l95 88l46 -54l-35 -406 l-77 -71zM821 765l11 129l75 70l63 -70l-15 -164l-54 -52zM923 652l77 69l63 -69l-76 -69z" /> |
|---|
| | | <glyph unicode="'" horiz-adv-x="361" d="M205 1059l20 244h140l-21 -244l-76 -69z" /> |
|---|
| | | <glyph unicode="(" horiz-adv-x="657" d="M127 166l35 406l56 54l80 -88l-32 -372l-78 -71zM175 730l35 408l77 70l63 -70l-32 -373l-95 -87zM212 69l77 71h130l127 -140h-270zM315 1234l74 69h270l-151 -139h-130z" /> |
|---|
| | | <glyph unicode=")" horiz-adv-x="657" d="M112 0l152 140h129l61 -71l-74 -69h-268zM225 1303h268l64 -69l-75 -70h-128zM421 166l31 372l95 88l49 -54l-36 -406l-78 -71zM473 765l32 373l76 70l63 -70l-35 -408l-56 -52z" /> |
|---|
| | | <glyph unicode="*" horiz-adv-x="809" d="M181 793l35 97l101 54h139l-87 -127l-95 -48zM210 1134l99 26l86 -52l65 -123h-140l-91 54zM397 694l9 107l80 128l58 -123l-10 -112l-76 -68zM434 1125l9 109l75 69l63 -69l-9 -109l-80 -125zM519 951l64 -124l87 -58l97 24l-17 99l-91 59h-140zM521 989l86 123l99 48 l91 -26l-34 -95l-102 -50h-140z" /> |
|---|
| | | <glyph unicode="+" horiz-adv-x="847" d="M169 652l75 69h147l65 -69l-78 -69h-147zM389 408l13 149l76 69l64 -69l-13 -149l-75 -69zM419 747l13 147l76 70l64 -70l-13 -147l-75 -69zM506 652l77 69h147l63 -69l-76 -69h-147z" /> |
|---|
| | | <glyph unicode="," horiz-adv-x="361" d="M99 -147l26 287h139l-26 -287l-76 -69z" /> |
|---|
| | | <glyph unicode="-" horiz-adv-x="847" d="M169 652l75 69h486l63 -69l-76 -69h-486z" /> |
|---|
| | | <glyph unicode="." horiz-adv-x="361" d="M112 0l13 140h139l-13 -140h-139z" /> |
|---|
| | | <glyph unicode="/" horiz-adv-x="942" d="M84 197l292 436l119 34l15 -71l-391 -589zM505 830l288 436l197 50l-392 -584l-73 -21z" /> |
|---|
| | | <glyph unicode="0" d="M114 26l48 546l56 54l80 -88l-32 -372zM138 0l151 140h452l125 -140h-728zM175 730l48 547l127 -139l-32 -373l-95 -87zM251 1303h728l-149 -139h-452zM769 166l32 372l95 88l46 -54l-48 -546zM821 765l32 373l151 139l-49 -547l-54 -52z" /> |
|---|
| | | <glyph unicode="1" horiz-adv-x="534" d="M212 166l32 372l95 88l48 -54l-48 -546zM264 765l32 373l153 139l-49 -547l-56 -52z" /> |
|---|
| | | <glyph unicode="2" d="M114 26l48 546l56 54l80 -88l-32 -372zM138 0l151 140h452l125 -140h-728zM248 652l74 69h486l65 -69l-78 -69h-486zM251 1303h728l-149 -139h-452zM821 765l32 373l151 139l-49 -547l-54 -52z" /> |
|---|
| | | <glyph unicode="3" d="M138 0l151 140h452l125 -140h-728zM248 652l74 69h486l65 -69l-78 -69h-486zM251 1303h728l-149 -139h-452zM769 166l32 372l95 88l46 -54l-48 -546zM821 765l32 373l151 139l-49 -547l-54 -52z" /> |
|---|
| | | <glyph unicode="4" d="M175 730l48 547l127 -139l-32 -373l-95 -87zM248 652l74 69h486l65 -69l-78 -69h-486zM769 166l32 372l95 88l46 -54l-48 -546zM821 765l32 373l151 139l-49 -547l-54 -52z" /> |
|---|
| | | <glyph unicode="5" d="M138 0l151 140h452l125 -140h-728zM175 730l48 547l127 -139l-32 -373l-95 -87zM248 652l74 69h486l65 -69l-78 -69h-486zM251 1303h728l-149 -139h-452zM769 166l32 372l95 88l46 -54l-48 -546z" /> |
|---|
| | | <glyph unicode="6" d="M114 26l48 546l56 54l80 -88l-32 -372zM138 0l151 140h452l125 -140h-728zM175 730l48 547l127 -139l-32 -373l-95 -87zM248 652l74 69h486l65 -69l-78 -69h-486zM251 1303h728l-149 -139h-452zM769 166l32 372l95 88l46 -54l-48 -546z" /> |
|---|
| | | <glyph unicode="7" d="M251 1303h728l-149 -139h-452zM769 166l32 372l95 88l46 -54l-48 -546zM821 765l32 373l151 139l-49 -547l-54 -52z" /> |
|---|
| | | <glyph unicode="8" d="M114 26l48 546l56 54l80 -88l-32 -372zM138 0l151 140h452l125 -140h-728zM175 730l48 547l127 -139l-32 -373l-95 -87zM248 652l74 69h486l65 -69l-78 -69h-486zM251 1303h728l-149 -139h-452zM769 166l32 372l95 88l46 -54l-48 -546zM821 765l32 373l151 139l-49 -547 l-54 -52z" /> |
|---|
| | | <glyph unicode="9" d="M138 0l151 140h452l125 -140h-728zM175 730l48 547l127 -139l-32 -373l-95 -87zM248 652l74 69h486l65 -69l-78 -69h-486zM251 1303h728l-149 -139h-452zM769 166l32 372l95 88l46 -54l-48 -546zM821 765l32 373l151 139l-49 -547l-54 -52z" /> |
|---|
| | | <glyph unicode=":" horiz-adv-x="448" d="M155 0l13 140h139l-13 -140h-139zM236 946l13 139h140l-13 -139h-140z" /> |
|---|
| | | <glyph unicode=";" horiz-adv-x="448" d="M141 -147l27 287h139l-26 -287l-74 -69zM236 946l13 139h140l-13 -139h-140z" /> |
|---|
| | | <glyph unicode="<" horiz-adv-x="737" d="M168 631h195l292 -318l-9 -97h-99zM169 670l455 417h98l-9 -98l-348 -319h-196z" /> |
|---|
| | | <glyph unicode="=" horiz-adv-x="847" d="M156 512l75 71h486l63 -71l-74 -69h-486zM181 791l74 69h486l63 -69l-74 -70h-486z" /> |
|---|
| | | <glyph unicode=">" horiz-adv-x="737" d="M130 205l8 98l346 319h197l-452 -417h-99zM197 979l10 99h98l380 -419h-197z" /> |
|---|
| | | <glyph unicode="?" d="M97 -166h139l13 140h-139zM114 26l48 546l56 54l80 -88l-32 -372zM225 1303h617l63 -69l-75 -70h-476zM248 652l74 69h486l65 -69l-78 -69h-486zM821 765l32 373l76 70l61 -70l-35 -408l-54 -52z" /> |
|---|
| | | <glyph unicode="@" horiz-adv-x="1176" d="M127 166l35 406l56 54l80 -88l-32 -372l-78 -71zM175 730l35 408l77 70l63 -70l-32 -373l-95 -87zM212 69l77 71h722l61 -71l-74 -69h-722zM315 1234l74 69h763l-148 -139h-626zM324 443l32 356l55 52l81 -86l-28 -322l-77 -69zM410 348l76 69h452l125 -140h-590z M439 877l75 69h486l65 -69l-76 -69h-486zM966 443l28 322l95 86l49 -52l-45 -496zM1015 990l11 148l153 139l-28 -322l-58 -52z" /> |
|---|
| | | <glyph unicode="A" d="M112 0l50 572l56 54l80 -88l-34 -398zM175 730l48 547l127 -139l-32 -373l-95 -87zM248 652l74 69h486l65 -69l-78 -69h-486zM251 1303h728l-149 -139h-452zM767 140l34 398l95 88l46 -54l-50 -572zM821 765l32 373l151 139l-49 -547l-54 -52z" /> |
|---|
| | | <glyph unicode="B" d="M114 26l48 546l56 54l80 -88l-32 -372zM138 0l151 140h452l61 -71l-74 -69h-590zM175 730l48 547l127 -139l-32 -373l-95 -87zM248 652l74 69h486l65 -69l-78 -69h-486zM251 1303h591l63 -69l-75 -70h-452zM769 166l32 372l95 88l46 -54l-35 -406l-77 -71zM821 765 l32 373l76 70l61 -70l-35 -408l-54 -52z" /> |
|---|
| | | <glyph unicode="C" d="M127 166l35 406l56 54l80 -88l-32 -372l-78 -71zM175 730l35 408l77 70l63 -70l-32 -373l-95 -87zM212 69l77 71h478l125 -140h-616zM315 1234l74 69h616l-149 -139h-478z" /> |
|---|
| | | <glyph unicode="D" d="M114 26l48 546l56 54l80 -88l-32 -372zM138 0l151 140h452l61 -71l-74 -69h-590zM175 730l48 547l127 -139l-32 -373l-95 -87zM251 1303h591l63 -69l-75 -70h-452zM769 166l32 372l95 88l46 -54l-35 -406l-77 -71zM821 765l32 373l76 70l61 -70l-35 -408l-54 -52z" /> |
|---|
| | | <glyph unicode="E" d="M114 26l48 546l56 54l80 -88l-32 -372zM138 0l151 140h478l125 -140h-754zM175 730l48 547l127 -139l-32 -373l-95 -87zM248 652l74 69h486l65 -69l-78 -69h-486zM251 1303h754l-149 -139h-478z" /> |
|---|
| | | <glyph unicode="F" d="M114 26l48 546l56 54l80 -88l-32 -372zM175 730l48 547l127 -139l-32 -373l-95 -87zM248 652l74 69h486l65 -69l-78 -69h-486zM251 1303h754l-149 -139h-478z" /> |
|---|
| | | <glyph unicode="G" d="M127 166l35 406l56 54l80 -88l-32 -372l-78 -71zM175 730l35 408l77 70l63 -70l-32 -373l-95 -87zM212 69l64 -69h452l74 69l-61 71h-452zM315 1234l74 69h590l-149 -139h-452zM577 652l75 69h156l65 -69l-78 -69h-156zM769 166l32 372l95 88l46 -54l-35 -406l-77 -71z " /> |
|---|
| | | <glyph unicode="H" d="M112 0l50 572l56 54l80 -88l-34 -398zM175 730l50 573l129 -139l-36 -399l-95 -87zM248 652l74 69h486l65 -69l-78 -69h-486zM767 140l34 398l95 88l46 -54l-50 -572zM821 765l35 399l149 139l-50 -573l-54 -52z" /> |
|---|
| | | <glyph unicode="I" horiz-adv-x="534" d="M203 69l41 469l95 88l48 -54l-44 -503l-77 -69zM264 765l41 469l75 69l65 -69l-45 -504l-56 -52z" /> |
|---|
| | | <glyph unicode="J" d="M114 26l33 374l56 51l80 -86l-17 -199zM138 0l151 140h452l125 -140h-728zM769 166l32 372l95 88l46 -54l-48 -546zM821 765l35 399l149 139l-50 -573l-54 -52z" /> |
|---|
| | | <glyph unicode="K" d="M112 0l50 572l56 54l80 -88l-34 -398zM175 730l50 573l129 -139l-36 -399l-95 -87zM248 652l74 69h486l65 -69l-78 -69h-486zM352 761l7 99l483 438h98l-9 -99l-480 -438h-99zM767 140l34 398l95 88l46 -54l-50 -572z" /> |
|---|
| | | <glyph unicode="L" d="M114 26l48 546l56 54l80 -88l-32 -372zM138 0l151 140h478l125 -140h-754zM175 730l50 573l129 -139l-36 -399l-95 -87z" /> |
|---|
| | | <glyph unicode="M" d="M112 0l50 572l56 54l80 -88l-34 -398zM175 730l48 547l127 -139l-32 -373l-95 -87zM251 1303h728l-149 -139h-452zM497 748l28 311l75 69l65 -69l-28 -311l-77 -70zM767 140l34 398l95 88l46 -54l-50 -572zM821 765l32 373l151 139l-49 -547l-54 -52z" /> |
|---|
| | | <glyph unicode="N" d="M112 0l50 572l56 54l80 -88l-34 -398zM175 730l50 573l129 -139l-36 -399l-95 -87zM376 1063l9 101h99l309 -339l-9 -99h-99zM767 140l34 398l95 88l46 -54l-50 -572zM821 765l35 399l149 139l-50 -573l-54 -52z" /> |
|---|
| | | <glyph unicode="O" d="M127 166l61 -71l78 71l32 372l-80 88l-56 -54zM175 730l35 408l77 70l63 -70l-32 -373l-95 -87zM212 69l77 71h452l61 -71l-74 -69h-452zM315 1234l74 69h453l63 -69l-75 -70h-452zM769 166l32 372l95 88l46 -54l-35 -406l-77 -71zM821 765l32 373l76 70l61 -70l-35 -408 l-54 -52z" /> |
|---|
| | | <glyph unicode="P" d="M112 0l50 572l56 54l80 -88l-34 -398zM175 730l48 547l127 -139l-32 -373l-95 -87zM248 652l74 69h486l65 -69l-78 -69h-486zM251 1303h591l63 -69l-75 -70h-452zM821 765l32 373l76 70l61 -70l-35 -408l-54 -52z" /> |
|---|
| | | <glyph unicode="Q" d="M127 166l61 -71l78 71l32 372l-80 88l-56 -54zM175 730l35 408l77 70l63 -70l-32 -373l-95 -87zM212 69l77 71h327l62 -71l-75 -69h-327zM315 1234l74 69h453l63 -69l-75 -70h-452zM644 166l8 98h98l151 -165l-9 -99h-99zM780 289l21 249l95 88l46 -54l-24 -283l-76 -69z M821 765l32 373l76 70l61 -70l-35 -408l-54 -52z" /> |
|---|
| | | <glyph unicode="R" d="M112 0l50 572l56 54l80 -88l-34 -398zM175 730l48 547l127 -139l-32 -373l-95 -87zM248 652l74 69h486l65 -69l-78 -69h-486zM251 1303h591l63 -69l-75 -70h-452zM385 449l10 98h98l408 -448l-9 -99h-99zM821 765l32 373l76 70l61 -70l-35 -408l-54 -52z" /> |
|---|
| | | <glyph unicode="S" d="M117 69l77 71h547l61 -71l-74 -69h-547zM175 730l35 408l77 70l63 -70l-32 -373l-95 -87zM248 652l74 69h486l65 -69l-78 -69h-486zM315 1234l74 69h547l64 -69l-75 -70h-547zM769 166l32 372l95 88l46 -54l-35 -406l-77 -71z" /> |
|---|
| | | <glyph unicode="T" d="M225 1303h780l-149 -139h-502zM438 69l35 400l95 88l48 -52l-39 -436l-76 -69zM493 694l32 375l75 69l65 -69l-36 -410l-56 -50z" /> |
|---|
| | | <glyph unicode="U" d="M127 166l61 -71l78 71l32 372l-80 88l-56 -54zM175 730l50 573l129 -139l-36 -399l-95 -87zM212 69l77 71h452l61 -71l-74 -69h-452zM769 166l32 372l95 88l46 -54l-35 -406l-77 -71zM821 765l35 399l149 139l-50 -573l-54 -52z" /> |
|---|
| | | <glyph unicode="V" d="M117 69l64 -69l76 69l41 469l-80 88l-56 -54zM175 730l50 573l129 -139l-36 -399l-95 -87zM281 69l9 99l496 458l110 1l-19 -102l-497 -456h-99zM821 765l35 399l149 139l-50 -573l-54 -52z" /> |
|---|
| | | <glyph unicode="W" d="M114 26l48 546l56 54l80 -88l-32 -372zM138 0l151 140h452l125 -140h-728zM175 730l50 573l129 -139l-36 -399l-95 -87zM452 242l28 313l75 71l65 -71l-28 -313l-76 -69zM769 166l32 372l95 88l46 -54l-48 -546zM821 765l35 399l149 139l-50 -573l-54 -52z" /> |
|---|
| | | <glyph unicode="X" d="M112 0l11 136l337 490h69l-13 -153l-324 -473h-80zM214 1167l11 136h80l242 -473l-13 -152h-69zM570 473l13 153h69l251 -490l-11 -136h-80zM588 678l13 152l324 473h80l-11 -136l-335 -489h-71z" /> |
|---|
| | | <glyph unicode="Y" d="M175 730l48 -52l95 87l36 399l-129 139zM212 69l77 71h452l61 -71l-74 -69h-452zM248 652l74 69h486l65 -69l-78 -69h-486zM769 166l32 372l95 88l46 -54l-35 -406l-77 -71zM821 765l35 399l149 139l-50 -573l-54 -52z" /> |
|---|
| | | <glyph unicode="Z" d="M117 69l77 71h547l125 -140h-685zM127 173l9 97l311 356l76 7l6 -123l-300 -337h-102zM225 1303h711l64 -69l-75 -70h-571zM559 672v75l335 381h96l-9 -102l-300 -339z" /> |
|---|
| | | <glyph unicode="[" horiz-adv-x="657" d="M114 26l48 546l56 54l80 -88l-32 -372zM138 0l151 140h130l127 -140h-408zM175 730l48 547l127 -139l-32 -373l-95 -87zM251 1303h408l-151 -139h-130z" /> |
|---|
| | | <glyph unicode="\" horiz-adv-x="942" d="M182 1316l185 -50l216 -436l-45 -119l-69 21zM538 596l22 71l118 -34l214 -436l-69 -190z" /> |
|---|
| | | <glyph unicode="]" horiz-adv-x="657" d="M112 0l152 140h129l126 -140h-407zM225 1303h408l-151 -139h-128zM421 166l31 372l95 88l49 -54l-49 -546zM473 765l32 373l152 139l-48 -547l-56 -52z" /> |
|---|
| | | <glyph unicode="^" horiz-adv-x="916" d="M188 879l9 98l352 326l-17 -197l-247 -227h-97zM570 1106l16 197l304 -329l-9 -101h-97z" /> |
|---|
| | | <glyph unicode="_" horiz-adv-x="828" d="M26 -277l75 68h590l65 -68l-76 -71h-591z" /> |
|---|
| | | <glyph unicode="`" horiz-adv-x="463" d="M222 1247l124 69l103 -210l-34 -95l-91 26z" /> |
|---|
| | | <glyph unicode="a" d="M112 0l50 572l56 54l80 -88l-34 -398zM175 730l48 547l127 -139l-32 -373l-95 -87zM248 652l74 69h486l65 -69l-78 -69h-486zM251 1303h728l-149 -139h-452zM767 140l34 398l95 88l46 -54l-50 -572zM821 765l32 373l151 139l-49 -547l-54 -52z" /> |
|---|
| | | <glyph unicode="b" d="M114 26l48 546l56 54l80 -88l-32 -372zM138 0l151 140h452l61 -71l-74 -69h-590zM175 730l48 547l127 -139l-32 -373l-95 -87zM248 652l74 69h486l65 -69l-78 -69h-486zM251 1303h591l63 -69l-75 -70h-452zM769 166l32 372l95 88l46 -54l-35 -406l-77 -71zM821 765 l32 373l76 70l61 -70l-35 -408l-54 -52z" /> |
|---|
| | | <glyph unicode="c" d="M127 166l35 406l56 54l80 -88l-32 -372l-78 -71zM175 730l35 408l77 70l63 -70l-32 -373l-95 -87zM212 69l77 71h478l125 -140h-616zM315 1234l74 69h616l-149 -139h-478z" /> |
|---|
| | | <glyph unicode="d" d="M114 26l48 546l56 54l80 -88l-32 -372zM138 0l151 140h452l61 -71l-74 -69h-590zM175 730l48 547l127 -139l-32 -373l-95 -87zM251 1303h591l63 -69l-75 -70h-452zM769 166l32 372l95 88l46 -54l-35 -406l-77 -71zM821 765l32 373l76 70l61 -70l-35 -408l-54 -52z" /> |
|---|
| | | <glyph unicode="e" d="M114 26l48 546l56 54l80 -88l-32 -372zM138 0l151 140h478l125 -140h-754zM175 730l48 547l127 -139l-32 -373l-95 -87zM248 652l74 69h486l65 -69l-78 -69h-486zM251 1303h754l-149 -139h-478z" /> |
|---|
| | | <glyph unicode="f" d="M114 26l48 546l56 54l80 -88l-32 -372zM175 730l48 547l127 -139l-32 -373l-95 -87zM248 652l74 69h486l65 -69l-78 -69h-486zM251 1303h754l-149 -139h-478z" /> |
|---|
| | | <glyph unicode="g" d="M127 166l35 406l56 54l80 -88l-32 -372l-78 -71zM175 730l35 408l77 70l63 -70l-32 -373l-95 -87zM212 69l64 -69h452l74 69l-61 71h-452zM315 1234l74 69h590l-149 -139h-452zM577 652l75 69h156l65 -69l-78 -69h-156zM769 166l32 372l95 88l46 -54l-35 -406l-77 -71z " /> |
|---|
| | | <glyph unicode="h" d="M112 0l50 572l56 54l80 -88l-34 -398zM175 730l50 573l129 -139l-36 -399l-95 -87zM248 652l74 69h486l65 -69l-78 -69h-486zM767 140l34 398l95 88l46 -54l-50 -572zM821 765l35 399l149 139l-50 -573l-54 -52z" /> |
|---|
| | | <glyph unicode="i" horiz-adv-x="534" d="M203 69l41 469l95 88l48 -54l-44 -503l-77 -69zM264 765l41 469l75 69l65 -69l-45 -504l-56 -52z" /> |
|---|
| | | <glyph unicode="j" d="M114 26l33 374l56 51l80 -86l-17 -199zM138 0l151 140h452l125 -140h-728zM769 166l32 372l95 88l46 -54l-48 -546zM821 765l35 399l149 139l-50 -573l-54 -52z" /> |
|---|
| | | <glyph unicode="k" d="M112 0l50 572l56 54l80 -88l-34 -398zM175 730l50 573l129 -139l-36 -399l-95 -87zM248 652l74 69h486l65 -69l-78 -69h-486zM352 761l7 99l483 438h98l-9 -99l-480 -438h-99zM767 140l34 398l95 88l46 -54l-50 -572z" /> |
|---|
| | | <glyph unicode="l" d="M114 26l48 546l56 54l80 -88l-32 -372zM138 0l151 140h478l125 -140h-754zM175 730l50 573l129 -139l-36 -399l-95 -87z" /> |
|---|
| | | <glyph unicode="m" d="M112 0l50 572l56 54l80 -88l-34 -398zM175 730l48 547l127 -139l-32 -373l-95 -87zM251 1303h728l-149 -139h-452zM497 748l28 311l75 69l65 -69l-28 -311l-77 -70zM767 140l34 398l95 88l46 -54l-50 -572zM821 765l32 373l151 139l-49 -547l-54 -52z" /> |
|---|
| | | <glyph unicode="n" d="M112 0l50 572l56 54l80 -88l-34 -398zM175 730l50 573l129 -139l-36 -399l-95 -87zM376 1063l9 101h99l309 -339l-9 -99h-99zM767 140l34 398l95 88l46 -54l-50 -572zM821 765l35 399l149 139l-50 -573l-54 -52z" /> |
|---|
| | | <glyph unicode="o" d="M127 166l61 -71l78 71l32 372l-80 88l-56 -54zM175 730l35 408l77 70l63 -70l-32 -373l-95 -87zM212 69l77 71h452l61 -71l-74 -69h-452zM315 1234l74 69h453l63 -69l-75 -70h-452zM769 166l32 372l95 88l46 -54l-35 -406l-77 -71zM821 765l32 373l76 70l61 -70l-35 -408 l-54 -52z" /> |
|---|
| | | <glyph unicode="p" d="M112 0l50 572l56 54l80 -88l-34 -398zM175 730l48 547l127 -139l-32 -373l-95 -87zM248 652l74 69h486l65 -69l-78 -69h-486zM251 1303h591l63 -69l-75 -70h-452zM821 765l32 373l76 70l61 -70l-35 -408l-54 -52z" /> |
|---|
| | | <glyph unicode="q" d="M127 166l61 -71l78 71l32 372l-80 88l-56 -54zM175 730l35 408l77 70l63 -70l-32 -373l-95 -87zM212 69l77 71h327l62 -71l-75 -69h-327zM315 1234l74 69h453l63 -69l-75 -70h-452zM644 166l8 98h98l151 -165l-9 -99h-99zM780 289l21 249l95 88l46 -54l-24 -283l-76 -69z M821 765l32 373l76 70l61 -70l-35 -408l-54 -52z" /> |
|---|
| | | <glyph unicode="r" d="M112 0l50 572l56 54l80 -88l-34 -398zM175 730l48 547l127 -139l-32 -373l-95 -87zM248 652l74 69h486l65 -69l-78 -69h-486zM251 1303h591l63 -69l-75 -70h-452zM385 449l10 98h98l408 -448l-9 -99h-99zM821 765l32 373l76 70l61 -70l-35 -408l-54 -52z" /> |
|---|
| | | <glyph unicode="s" d="M117 69l77 71h547l61 -71l-74 -69h-547zM175 730l35 408l77 70l63 -70l-32 -373l-95 -87zM248 652l74 69h486l65 -69l-78 -69h-486zM315 1234l74 69h547l64 -69l-75 -70h-547zM769 166l32 372l95 88l46 -54l-35 -406l-77 -71z" /> |
|---|
| | | <glyph unicode="t" d="M225 1303h780l-149 -139h-502zM438 69l35 400l95 88l48 -52l-39 -436l-76 -69zM493 694l32 375l75 69l65 -69l-36 -410l-56 -50z" /> |
|---|
| | | <glyph unicode="u" d="M127 166l61 -71l78 71l32 372l-80 88l-56 -54zM175 730l50 573l129 -139l-36 -399l-95 -87zM212 69l77 71h452l61 -71l-74 -69h-452zM769 166l32 372l95 88l46 -54l-35 -406l-77 -71zM821 765l35 399l149 139l-50 -573l-54 -52z" /> |
|---|
| | | <glyph unicode="v" d="M117 69l64 -69l76 69l41 469l-80 88l-56 -54zM175 730l50 573l129 -139l-36 -399l-95 -87zM281 69l9 99l496 458l110 1l-19 -102l-497 -456h-99zM821 765l35 399l149 139l-50 -573l-54 -52z" /> |
|---|
| | | <glyph unicode="w" d="M114 26l48 546l56 54l80 -88l-32 -372zM138 0l151 140h452l125 -140h-728zM175 730l50 573l129 -139l-36 -399l-95 -87zM452 242l28 313l75 71l65 -71l-28 -313l-76 -69zM769 166l32 372l95 88l46 -54l-48 -546zM821 765l35 399l149 139l-50 -573l-54 -52z" /> |
|---|
| | | <glyph unicode="x" d="M112 0l11 136l337 490h69l-13 -153l-324 -473h-80zM214 1167l11 136h80l242 -473l-13 -152h-69zM570 473l13 153h69l251 -490l-11 -136h-80zM588 678l13 152l324 473h80l-11 -136l-335 -489h-71z" /> |
|---|
| | | <glyph unicode="y" d="M175 730l48 -52l95 87l36 399l-129 139zM212 69l77 71h452l61 -71l-74 -69h-452zM248 652l74 69h486l65 -69l-78 -69h-486zM769 166l32 372l95 88l46 -54l-35 -406l-77 -71zM821 765l35 399l149 139l-50 -573l-54 -52z" /> |
|---|
| | | <glyph unicode="z" d="M117 69l77 71h547l125 -140h-685zM127 173l9 97l311 356l76 7l6 -123l-300 -337h-102zM225 1303h711l64 -69l-75 -70h-571zM559 672v75l335 381h96l-9 -102l-300 -339z" /> |
|---|
| | | <glyph unicode="{" horiz-adv-x="778" d="M125 652l76 69h129l65 -69l-78 -69h-129zM290 166l32 372l95 88l48 -54l-35 -406l-76 -71zM343 765l31 373l78 70l62 -70l-36 -408l-55 -52zM378 69l76 71h88l125 -140h-226zM480 1234l75 69h225l-149 -139h-87z" /> |
|---|
| | | <glyph unicode="|" horiz-adv-x="510" d="M158 -348l144 1651h136l-144 -1651h-136z" /> |
|---|
| | | <glyph unicode="}" horiz-adv-x="778" d="M112 0l152 140h86l61 -71l-74 -69h-225zM225 1303h226l63 -69l-75 -70h-85zM378 166l35 406l56 54l78 -88l-31 -372l-77 -71zM426 730l36 408l76 70l62 -70l-32 -373l-93 -87zM499 652l74 69h131l63 -69l-76 -69h-131z" /> |
|---|
| | | <glyph unicode="~" horiz-adv-x="916" d="M155 484l14 177q43 43 85 62.5t89 19.5q73 0 189 -52q71 -32 133 -32q52 0 101 27t105 83l-16 -184q-32 -37 -87 -58.5t-122 -21.5q-65 0 -127 18q-15 6 -83 39q-48 24 -86 24q-39 0 -84.5 -23t-110.5 -79z" /> |
|---|
| | | <glyph unicode="­" horiz-adv-x="847" d="M169 652l75 69h486l63 -69l-76 -69h-486z" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="790" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="1581" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="790" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="1581" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="527" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="395" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="263" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="263" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="197" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="316" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="87" /> |
|---|
| | | <glyph unicode="‐" horiz-adv-x="847" d="M169 652l75 69h486l63 -69l-76 -69h-486z" /> |
|---|
| | | <glyph unicode="‑" horiz-adv-x="847" d="M169 652l75 69h486l63 -69l-76 -69h-486z" /> |
|---|
| | | <glyph unicode="‒" horiz-adv-x="847" d="M169 652l75 69h486l63 -69l-76 -69h-486z" /> |
|---|
| | | <glyph unicode="–" horiz-adv-x="1038" d="M78 652l77 69h849l65 -69l-79 -69h-849z" /> |
|---|
| | | <glyph unicode="—" horiz-adv-x="1826" d="M78 652l77 69h1642l63 -69l-76 -69h-1643z" /> |
|---|
| | | <glyph unicode="‘" horiz-adv-x="361" d="M199 990l21 244l74 69l65 -69l-20 -244h-140z" /> |
|---|
| | | <glyph unicode="’" horiz-adv-x="361" d="M205 1059l20 244h140l-21 -244l-76 -69z" /> |
|---|
| | | <glyph unicode="“" horiz-adv-x="569" d="M199 990l21 244l74 69l65 -69l-20 -244h-140zM408 990l20 244l75 69l65 -69l-21 -244h-139z" /> |
|---|
| | | <glyph unicode="”" horiz-adv-x="569" d="M205 1059l20 244h140l-21 -244l-76 -69zM413 1059l21 244h139l-20 -244l-76 -69z" /> |
|---|
| | | <glyph unicode="•" d="M168 614q-1 25 1 38q13 162 138 276.5t285 114.5q155 0 257 -102.5t102 -253.5q0 -24 -1 -35q-15 -162 -139 -276.5t-288 -114.5q-151 0 -253 102t-102 251z" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="316" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="395" /> |
|---|
| | | <glyph unicode="◼" horiz-adv-x="1303" d="M0 0v1303h1303v-1303h-1303z" /> |
|---|
| | | </font> |
|---|
| | | </defs></svg> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <!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: 'ds-digitalbold_italic'; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | |
|---|
| | | <title>DS-Digital Bold Italic 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"> |
|---|
| | | DS-Digital Bold Italic </div> |
|---|
| | | <ul class="tabs"> |
|---|
| | | <li><a href="#specimen">Specimen</a></li> |
|---|
| | | <li><a href="#layout">Sample Layout</a></li> |
|---|
| | | <li><a href="#glyphs">Glyphs & 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​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;</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">◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼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>DS-Digital Bold Italic</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 DS-Digital Bold Italic in this kit supports the following languages:<br /> |
|---|
| | | |
|---|
| | | English, Arrernte, Bislama, Cebuano, Fijian, Gilbertese, Hmong, Ibanag, Iloko_ilokano, Interglossa_glosa, Interlingua, Lojban, Norfolk_pitcairnese, Oromo, Rotokas, Seychelles_creole, Shona, Somali, Southern_ndebele, Swahili, Swati_swazi, Tok_pisin, Warlpiri, Xhosa, Zulu, Latinbasic, Ubasic, Demo </p> |
|---|
| | | <h1>Glyph Chart</h1> |
|---|
| | | <p>The subset of DS-Digital Bold Italic 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>&#13;</p> </div> |
|---|
| | | <div><p>&#32;</p> </div> |
|---|
| | | <div><p>&#33;</p>!</div> |
|---|
| | | <div><p>&#34;</p>"</div> |
|---|
| | | <div><p>&#35;</p>#</div> |
|---|
| | | <div><p>&#36;</p>$</div> |
|---|
| | | <div><p>&#37;</p>%</div> |
|---|
| | | <div><p>&#38;</p>&</div> |
|---|
| | | <div><p>&#39;</p>'</div> |
|---|
| | | <div><p>&#40;</p>(</div> |
|---|
| | | <div><p>&#41;</p>)</div> |
|---|
| | | <div><p>&#42;</p>*</div> |
|---|
| | | <div><p>&#43;</p>+</div> |
|---|
| | | <div><p>&#44;</p>,</div> |
|---|
| | | <div><p>&#45;</p>-</div> |
|---|
| | | <div><p>&#46;</p>.</div> |
|---|
| | | <div><p>&#47;</p>/</div> |
|---|
| | | <div><p>&#48;</p>0</div> |
|---|
| | | <div><p>&#49;</p>1</div> |
|---|
| | | <div><p>&#50;</p>2</div> |
|---|
| | | <div><p>&#51;</p>3</div> |
|---|
| | | <div><p>&#52;</p>4</div> |
|---|
| | | <div><p>&#53;</p>5</div> |
|---|
| | | <div><p>&#54;</p>6</div> |
|---|
| | | <div><p>&#55;</p>7</div> |
|---|
| | | <div><p>&#56;</p>8</div> |
|---|
| | | <div><p>&#57;</p>9</div> |
|---|
| | | <div><p>&#58;</p>:</div> |
|---|
| | | <div><p>&#59;</p>;</div> |
|---|
| | | <div><p>&#60;</p><</div> |
|---|
| | | <div><p>&#61;</p>=</div> |
|---|
| | | <div><p>&#62;</p>></div> |
|---|
| | | <div><p>&#63;</p>?</div> |
|---|
| | | <div><p>&#64;</p>@</div> |
|---|
| | | <div><p>&#65;</p>A</div> |
|---|
| | | <div><p>&#66;</p>B</div> |
|---|
| | | <div><p>&#67;</p>C</div> |
|---|
| | | <div><p>&#68;</p>D</div> |
|---|
| | | <div><p>&#69;</p>E</div> |
|---|
| | | <div><p>&#70;</p>F</div> |
|---|
| | | <div><p>&#71;</p>G</div> |
|---|
| | | <div><p>&#72;</p>H</div> |
|---|
| | | <div><p>&#73;</p>I</div> |
|---|
| | | <div><p>&#74;</p>J</div> |
|---|
| | | <div><p>&#75;</p>K</div> |
|---|
| | | <div><p>&#76;</p>L</div> |
|---|
| | | <div><p>&#77;</p>M</div> |
|---|
| | | <div><p>&#78;</p>N</div> |
|---|
| | | <div><p>&#79;</p>O</div> |
|---|
| | | <div><p>&#80;</p>P</div> |
|---|
| | | <div><p>&#81;</p>Q</div> |
|---|
| | | <div><p>&#82;</p>R</div> |
|---|
| | | <div><p>&#83;</p>S</div> |
|---|
| | | <div><p>&#84;</p>T</div> |
|---|
| | | <div><p>&#85;</p>U</div> |
|---|
| | | <div><p>&#86;</p>V</div> |
|---|
| | | <div><p>&#87;</p>W</div> |
|---|
| | | <div><p>&#88;</p>X</div> |
|---|
| | | <div><p>&#89;</p>Y</div> |
|---|
| | | <div><p>&#90;</p>Z</div> |
|---|
| | | <div><p>&#91;</p>[</div> |
|---|
| | | <div><p>&#92;</p>\</div> |
|---|
| | | <div><p>&#93;</p>]</div> |
|---|
| | | <div><p>&#94;</p>^</div> |
|---|
| | | <div><p>&#95;</p>_</div> |
|---|
| | | <div><p>&#96;</p>`</div> |
|---|
| | | <div><p>&#97;</p>a</div> |
|---|
| | | <div><p>&#98;</p>b</div> |
|---|
| | | <div><p>&#99;</p>c</div> |
|---|
| | | <div><p>&#100;</p>d</div> |
|---|
| | | <div><p>&#101;</p>e</div> |
|---|
| | | <div><p>&#102;</p>f</div> |
|---|
| | | <div><p>&#103;</p>g</div> |
|---|
| | | <div><p>&#104;</p>h</div> |
|---|
| | | <div><p>&#105;</p>i</div> |
|---|
| | | <div><p>&#106;</p>j</div> |
|---|
| | | <div><p>&#107;</p>k</div> |
|---|
| | | <div><p>&#108;</p>l</div> |
|---|
| | | <div><p>&#109;</p>m</div> |
|---|
| | | <div><p>&#110;</p>n</div> |
|---|
| | | <div><p>&#111;</p>o</div> |
|---|
| | | <div><p>&#112;</p>p</div> |
|---|
| | | <div><p>&#113;</p>q</div> |
|---|
| | | <div><p>&#114;</p>r</div> |
|---|
| | | <div><p>&#115;</p>s</div> |
|---|
| | | <div><p>&#116;</p>t</div> |
|---|
| | | <div><p>&#117;</p>u</div> |
|---|
| | | <div><p>&#118;</p>v</div> |
|---|
| | | <div><p>&#119;</p>w</div> |
|---|
| | | <div><p>&#120;</p>x</div> |
|---|
| | | <div><p>&#121;</p>y</div> |
|---|
| | | <div><p>&#122;</p>z</div> |
|---|
| | | <div><p>&#123;</p>{</div> |
|---|
| | | <div><p>&#124;</p>|</div> |
|---|
| | | <div><p>&#125;</p>}</div> |
|---|
| | | <div><p>&#126;</p>~</div> |
|---|
| | | <div><p>&#160;</p> </div> |
|---|
| | | <div><p>&#173;</p>­</div> |
|---|
| | | <div><p>&#8192;</p> </div> |
|---|
| | | <div><p>&#8193;</p> </div> |
|---|
| | | <div><p>&#8194;</p> </div> |
|---|
| | | <div><p>&#8195;</p> </div> |
|---|
| | | <div><p>&#8196;</p> </div> |
|---|
| | | <div><p>&#8197;</p> </div> |
|---|
| | | <div><p>&#8198;</p> </div> |
|---|
| | | <div><p>&#8199;</p> </div> |
|---|
| | | <div><p>&#8200;</p> </div> |
|---|
| | | <div><p>&#8201;</p> </div> |
|---|
| | | <div><p>&#8202;</p> </div> |
|---|
| | | <div><p>&#8208;</p>‐</div> |
|---|
| | | <div><p>&#8209;</p>‑</div> |
|---|
| | | <div><p>&#8210;</p>‒</div> |
|---|
| | | <div><p>&#8211;</p>–</div> |
|---|
| | | <div><p>&#8212;</p>—</div> |
|---|
| | | <div><p>&#8217;</p>’</div> |
|---|
| | | <div><p>&#8220;</p>“</div> |
|---|
| | | <div><p>&#8221;</p>”</div> |
|---|
| | | <div><p>&#8226;</p>•</div> |
|---|
| | | <div><p>&#8239;</p> </div> |
|---|
| | | <div><p>&#8287;</p> </div> |
|---|
| | | <div><p>&#9724;</p>◼</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><link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /></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>©2010-2017 Font Squirrel. All rights reserved.</p> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </body> |
|---|
| | | </html> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <?xml version="1.0" standalone="no"?> |
|---|
| | | <!--<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >--> |
|---|
| | | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"> |
|---|
| | | <metadata></metadata> |
|---|
| | | <defs> |
|---|
| | | <font id="ds-digitalbold_italic" horiz-adv-x="1042" > |
|---|
| | | <font-face units-per-em="2048" ascent="1638" descent="-410" /> |
|---|
| | | <missing-glyph horiz-adv-x="484" /> |
|---|
| | | <glyph horiz-adv-x="0" /> |
|---|
| | | <glyph unicode="
" horiz-adv-x="484" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="484" /> |
|---|
| | | <glyph unicode="	" horiz-adv-x="484" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="484" /> |
|---|
| | | <glyph unicode="!" horiz-adv-x="584" d="M173 -261l15 173h194l-15 -173h-194zM212 194l26 299l133 121l65 -72l-47 -542zM266 810l26 298l211 195l-47 -542l-80 -74z" /> |
|---|
| | | <glyph unicode=""" horiz-adv-x="633" d="M179 1044l22 259h194l-23 -259l-106 -98zM441 1044l23 259h195l-22 -259l-106 -98z" /> |
|---|
| | | <glyph unicode="#" horiz-adv-x="1238" d="M145 426l106 97h105l87 -97l-106 -96h-104zM177 789l106 97h104l88 -97l-104 -96h-105zM357 145l14 147l104 97l91 -97l-13 -147l-108 -97zM393 559l9 98l104 97l92 -97l-10 -98l-106 -97zM424 923l15 164l107 99l89 -99l-15 -164l-106 -96zM516 426l106 97h87l88 -97 l-106 -96h-88zM547 789l106 97h88l88 -97l-105 -96h-87zM711 145l13 147l106 97l90 -97l-13 -147l-106 -97zM747 559l9 98l106 97l89 -97l-9 -98l-104 -97zM778 923l15 164l108 99l88 -99l-15 -164l-105 -96zM869 426l107 97h104l87 -97l-106 -96h-104zM901 789l106 97h105 l87 -97l-104 -96h-105z" /> |
|---|
| | | <glyph unicode="$" d="M117 97l105 97h499l89 -97l-106 -97h-499zM175 761l26 311l106 97l88 -97l-23 -262l-132 -123zM276 652l104 96h413l90 -96l-107 -97h-413zM348 1206l104 97h498l89 -97l-106 -98h-497zM385 -201l13 158h194l-13 -158l-106 -97zM519 1346l15 156l105 97l89 -97l-15 -156 h-194zM760 231l22 262l132 121l65 -72l-26 -311l-106 -97z" /> |
|---|
| | | <glyph unicode="%" horiz-adv-x="1431" d="M188 920l89 -91l105 91l15 156l-90 99l-104 -99zM311 788l106 96h102l90 -96l-108 -99h-103zM313 141l318 481l171 46l17 -100l-460 -691zM348 1210l106 99h103l89 -99l-108 -97h-102zM559 920l14 156l105 99l89 -99l-15 -156l-104 -91zM778 242l90 -91l106 91l13 149 l-90 97l-106 -97zM814 896l292 437l270 71l-430 -648l-103 -24zM901 110l108 97h101l87 -97l-104 -97h-101zM938 523l106 99h101l89 -99l-106 -97h-100zM1149 242l13 149l106 97l87 -97l-13 -149l-104 -91z" /> |
|---|
| | | <glyph unicode="&" horiz-adv-x="1113" d="M128 231l27 311l80 72l109 -121l-22 -262l-106 -97zM175 761l26 311l106 97l88 -97l-23 -262l-132 -123zM251 97l105 97h365l89 -97l-106 -97h-365zM276 652l104 96h413l90 -96l-107 -97h-413zM348 1206l104 97h365l90 -97l-106 -98h-365zM760 231l22 262l132 121l65 -72 l-26 -311l-106 -97zM810 810l7 78l105 97l89 -97l-11 -127l-80 -74zM955 652l104 96l90 -96l-106 -97z" /> |
|---|
| | | <glyph unicode="'" horiz-adv-x="368" d="M179 1044l22 259h194l-23 -259l-106 -98z" /> |
|---|
| | | <glyph unicode="(" horiz-adv-x="642" d="M108 231l87 -97l107 97l22 262l-110 121l-80 -72zM155 761l26 311l106 97l87 -97l-22 -262l-132 -123zM229 97l106 97h86l179 -194h-282zM326 1206l106 97h281l-212 -195h-86z" /> |
|---|
| | | <glyph unicode=")" horiz-adv-x="642" d="M43 0l212 194h88l89 -97l-106 -97h-283zM156 1303h283l90 -97l-106 -98h-88zM382 231l22 262l134 121l65 -72l-26 -311l-106 -97zM432 810l22 262l108 97l88 -97l-26 -311l-80 -74z" /> |
|---|
| | | <glyph unicode="*" horiz-adv-x="996" d="M140 592l46 132l145 77h194l-123 -175l-134 -69zM181 1065l136 35l121 -70l91 -174h-194l-130 77zM439 451l13 149l114 180l84 -173l-15 -156l-106 -97zM493 1054l13 152l105 97l91 -97l-13 -152l-116 -177zM613 810l89 -175l121 -78l138 35l-26 132l-127 86h-195z M618 862l119 173l134 65l131 -35l-49 -132l-139 -71h-196z" /> |
|---|
| | | <glyph unicode="+" horiz-adv-x="962" d="M145 652l104 96h164l90 -96l-106 -97h-164zM415 354l13 164l108 96l88 -96l-13 -164l-106 -97zM452 786l15 164l106 96l90 -96l-15 -164l-106 -99zM575 652l105 96h163l90 -96l-106 -97h-164z" /> |
|---|
| | | <glyph unicode="," horiz-adv-x="368" d="M76 -119l25 259h193l-24 -259l-104 -97z" /> |
|---|
| | | <glyph unicode="-" horiz-adv-x="962" d="M145 652l104 96h594l90 -96l-106 -97h-594z" /> |
|---|
| | | <glyph unicode="." horiz-adv-x="368" d="M88 0l16 194h194l-17 -194h-193z" /> |
|---|
| | | <glyph unicode="/" horiz-adv-x="1003" d="M61 188l283 419l172 43l16 -99l-422 -629zM525 881l283 422l274 69l-423 -631l-100 -26z" /> |
|---|
| | | <glyph unicode="0" d="M112 37l43 505l80 72l109 -121l-22 -262zM145 0l211 194h365l176 -194h-752zM175 761l43 505l177 -194l-23 -262l-132 -123zM259 1303h752l-210 -195h-365zM760 231l22 262l132 121l65 -72l-43 -505zM810 810l22 262l211 194l-43 -505l-80 -74z" /> |
|---|
| | | <glyph unicode="1" horiz-adv-x="584" d="M216 231l22 262l133 121l65 -72l-43 -505zM266 810l23 262l210 194l-43 -505l-80 -74z" /> |
|---|
| | | <glyph unicode="2" d="M112 37l43 505l80 72l109 -121l-22 -262zM145 0l211 194h365l176 -194h-752zM259 1303h752l-210 -195h-365zM276 652l104 96h413l90 -96l-107 -97h-413zM810 810l22 262l211 194l-43 -505l-80 -74z" /> |
|---|
| | | <glyph unicode="3" d="M145 0l211 194h365l176 -194h-752zM259 1303h752l-210 -195h-365zM276 652l104 96h413l90 -96l-107 -97h-413zM760 231l22 262l132 121l65 -72l-43 -505zM810 810l22 262l211 194l-43 -505l-80 -74z" /> |
|---|
| | | <glyph unicode="4" d="M175 761l43 505l177 -194l-23 -262l-132 -123zM276 652l104 96h413l90 -96l-107 -97h-413zM760 231l22 262l132 121l65 -72l-43 -505zM810 810l22 262l211 194l-43 -505l-80 -74z" /> |
|---|
| | | <glyph unicode="5" d="M145 0l211 194h365l176 -194h-752zM175 761l43 505l177 -194l-23 -262l-132 -123zM259 1303h752l-210 -195h-365zM276 652l104 96h413l90 -96l-107 -97h-413zM760 231l22 262l132 121l65 -72l-43 -505z" /> |
|---|
| | | <glyph unicode="6" d="M112 37l43 505l80 72l109 -121l-22 -262zM145 0l211 194h365l176 -194h-752zM175 761l43 505l177 -194l-23 -262l-132 -123zM259 1303h752l-210 -195h-365zM276 652l104 96h413l90 -96l-107 -97h-413zM760 231l22 262l132 121l65 -72l-43 -505z" /> |
|---|
| | | <glyph unicode="7" d="M259 1303h752l-210 -195h-365zM760 231l22 262l132 121l65 -72l-43 -505zM810 810l22 262l211 194l-43 -505l-80 -74z" /> |
|---|
| | | <glyph unicode="8" d="M112 37l43 505l80 72l109 -121l-22 -262zM145 0l211 194h365l176 -194h-752zM175 761l43 505l177 -194l-23 -262l-132 -123zM259 1303h752l-210 -195h-365zM276 652l104 96h413l90 -96l-107 -97h-413zM760 231l22 262l132 121l65 -72l-43 -505zM810 810l22 262l211 194 l-43 -505l-80 -74z" /> |
|---|
| | | <glyph unicode="9" d="M145 0l211 194h365l176 -194h-752zM175 761l43 505l177 -194l-23 -262l-132 -123zM259 1303h752l-210 -195h-365zM276 652l104 96h413l90 -96l-107 -97h-413zM760 231l22 262l132 121l65 -72l-43 -505zM810 810l22 262l211 194l-43 -505l-80 -74z" /> |
|---|
| | | <glyph unicode=":" horiz-adv-x="454" d="M130 0l17 194h196l-17 -194h-196zM209 892l16 193h196l-17 -193h-195z" /> |
|---|
| | | <glyph unicode=";" horiz-adv-x="454" d="M119 -119l24 259h196l-24 -259l-106 -97zM209 892l16 193h196l-17 -193h-195z" /> |
|---|
| | | <glyph unicode="<" horiz-adv-x="729" d="M141 624h274l259 -272l-13 -136h-138zM147 676l453 411h137l-11 -137l-305 -274h-274z" /> |
|---|
| | | <glyph unicode="=" horiz-adv-x="962" d="M130 486l105 97h594l89 -97l-106 -99h-594zM158 817l106 99h594l88 -99l-104 -96h-594z" /> |
|---|
| | | <glyph unicode=">" horiz-adv-x="729" d="M106 216l13 136l302 272h275l-452 -408h-138zM171 950l11 137h138l382 -411h-276z" /> |
|---|
| | | <glyph unicode="?" d="M84 -266h193l19 193h-194zM108 0l47 542l80 72l109 -121l-26 -299zM222 1303h595l90 -97l-106 -98h-403zM276 652l104 96h413l90 -96l-107 -97h-413zM810 810l22 262l106 97l88 -97l-26 -311l-80 -74z" /> |
|---|
| | | <glyph unicode="@" horiz-adv-x="1260" d="M128 231l27 311l80 72l109 -121l-22 -262l-106 -97zM175 761l26 311l106 97l88 -97l-23 -262l-132 -123zM251 97l105 97h748l91 -97l-108 -97h-748zM348 1206l104 97h775l-210 -195h-581zM458 542l19 212l82 73l109 -121l-15 -164l-104 -97zM583 408l106 98h275l177 -195 h-469zM600 864l104 97h324l89 -97l-106 -97h-324zM1002 542l15 164l134 121l65 -73l-36 -406zM1044 1022l4 50l212 194l-24 -292l-80 -75z" /> |
|---|
| | | <glyph unicode="A" d="M108 0l47 542l80 72l109 -121l-26 -299zM175 761l43 505l177 -194l-23 -262l-132 -123zM259 1303h752l-210 -195h-365zM276 652l104 96h413l90 -96l-107 -97h-413zM756 194l26 299l132 121l65 -72l-46 -542zM810 810l22 262l211 194l-43 -505l-80 -74z" /> |
|---|
| | | <glyph unicode="B" d="M112 37l43 505l80 72l109 -121l-22 -262zM145 0l211 194h365l89 -97l-106 -97h-559zM175 761l43 505l177 -194l-23 -262l-132 -123zM259 1303h558l90 -97l-106 -98h-365zM276 652l104 96h413l90 -96l-107 -97h-413zM760 231l22 262l132 121l65 -72l-26 -311l-106 -97z M810 810l22 262l106 97l88 -97l-26 -311l-80 -74z" /> |
|---|
| | | <glyph unicode="C" d="M128 231l88 -97l106 97l22 262l-109 121l-80 -72zM175 761l26 311l106 97l88 -97l-23 -262l-132 -123zM251 97l105 97h400l177 -194h-594zM348 1206l104 97h594l-210 -195h-400z" /> |
|---|
| | | <glyph unicode="D" d="M112 37l43 505l80 72l109 -121l-22 -262zM145 0l211 194h365l89 -97l-106 -97h-559zM175 761l43 505l177 -194l-23 -262l-132 -123zM259 1303h558l90 -97l-106 -98h-365zM760 231l22 262l132 121l65 -72l-26 -311l-106 -97zM810 810l22 262l106 97l88 -97l-26 -311 l-80 -74z" /> |
|---|
| | | <glyph unicode="E" d="M112 37l43 505l80 72l109 -121l-22 -262zM145 0l211 194h400l177 -194h-788zM175 761l43 505l177 -194l-23 -262l-132 -123zM259 1303h787l-210 -195h-400zM276 652l104 96h413l90 -96l-107 -97h-413z" /> |
|---|
| | | <glyph unicode="F" d="M112 37l43 505l80 72l109 -121l-22 -262zM175 761l43 505l177 -194l-23 -262l-132 -123zM259 1303h787l-210 -195h-400zM276 652l104 96h413l90 -96l-107 -97h-413z" /> |
|---|
| | | <glyph unicode="G" d="M128 231l30 339l78 72l110 -121l-24 -290l-106 -97zM177 788l24 284l106 97l88 -97l-21 -236l-130 -121zM251 97l88 -97h365l106 97l-89 97h-365zM348 1206l104 97h594l-210 -195h-400zM471 678l104 98h220l89 -98l-106 -97h-219zM760 231l24 290l132 121l67 -72 l-30 -339l-106 -97z" /> |
|---|
| | | <glyph unicode="H" d="M108 0l47 542l80 72l109 -121l-26 -299zM175 761l47 542l176 -195l-26 -298l-132 -123zM276 652l104 96h413l90 -96l-107 -97h-413zM756 194l26 299l132 121l65 -72l-46 -542zM810 810l26 298l210 195l-46 -542l-80 -74z" /> |
|---|
| | | <glyph unicode="I" horiz-adv-x="584" d="M212 194l26 299l133 121l65 -72l-47 -542zM266 810l26 298l211 195l-47 -542l-80 -74z" /> |
|---|
| | | <glyph unicode="J" d="M128 231l88 -97l106 97l15 175l-110 123l-80 -75zM251 97l105 97h365l89 -97l-106 -97h-365zM760 231l22 262l132 121l65 -72l-26 -311l-106 -97zM810 810l26 298l210 195l-46 -542l-80 -74z" /> |
|---|
| | | <glyph unicode="K" d="M108 0l47 542l80 72l109 -121l-26 -299zM175 761l47 542l176 -195l-26 -298l-132 -123zM276 652l104 96h413l90 -96l-107 -97h-413zM421 801l11 139l397 363h137l-11 -139l-396 -363h-138zM756 194l26 299l132 121l65 -72l-46 -542z" /> |
|---|
| | | <glyph unicode="L" d="M112 37l43 505l80 72l109 -121l-22 -262zM145 0l211 194h400l177 -194h-788zM175 761l47 542l176 -195l-26 -298l-132 -123z" /> |
|---|
| | | <glyph unicode="M" d="M108 0l47 542l80 72l109 -121l-26 -299zM175 761l43 505l177 -194l-23 -262l-132 -123zM259 1303h752l-210 -195h-365zM480 585l34 381l108 97l87 -97l-33 -381l-104 -99zM756 194l26 299l132 121l65 -72l-46 -542zM810 810l22 262l211 194l-43 -505l-80 -74z" /> |
|---|
| | | <glyph unicode="N" d="M108 0l47 542l80 72l109 -121l-26 -299zM175 761l47 542l176 -195l-26 -298l-132 -123zM274 1303h283l229 -266l-13 -140h-138zM756 194l26 299l132 121l65 -72l-46 -542zM810 810l26 298l210 195l-46 -542l-80 -74z" /> |
|---|
| | | <glyph unicode="O" d="M128 231l88 -97l106 97l22 262l-109 121l-80 -72zM175 761l26 311l106 97l88 -97l-23 -262l-132 -123zM251 97l105 97h365l89 -97l-106 -97h-365zM348 1206l104 97h365l90 -97l-106 -98h-365zM760 231l22 262l132 121l65 -72l-26 -311l-106 -97zM810 810l22 262l106 97 l88 -97l-26 -311l-80 -74z" /> |
|---|
| | | <glyph unicode="P" d="M108 0l47 542l80 72l109 -121l-26 -299zM175 761l43 505l177 -194l-23 -262l-132 -123zM259 1303h558l90 -97l-106 -98h-365zM276 652l104 96h413l90 -96l-107 -97h-413zM810 810l22 262l106 97l88 -97l-26 -311l-80 -74z" /> |
|---|
| | | <glyph unicode="Q" d="M128 231l88 -97l106 97l24 288l-110 121l-78 -72zM177 788l24 284l106 97l88 -97l-21 -236l-130 -121zM251 97l105 97h190l89 -97l-106 -97h-190zM348 1206l104 97h365l90 -97l-106 -98h-365zM585 231l11 140h139l211 -231l-13 -140h-138zM775 406l9 113l132 121l67 -72 l-15 -162l-104 -97zM812 836l20 236l106 97l88 -97l-24 -284l-79 -73z" /> |
|---|
| | | <glyph unicode="R" d="M108 0l47 542l80 72l109 -121l-26 -299zM175 761l43 505l177 -194l-23 -262l-132 -123zM259 1303h558l90 -97l-106 -98h-365zM276 652l104 96h413l90 -96l-107 -97h-413zM421 372l13 138h139l341 -370l-13 -140h-140zM810 810l22 262l106 97l88 -97l-26 -311l-80 -74z " /> |
|---|
| | | <glyph unicode="S" d="M117 97l105 97h499l89 -97l-106 -97h-499zM175 761l26 311l106 97l88 -97l-23 -262l-132 -123zM276 652l104 96h413l90 -96l-107 -97h-413zM348 1206l104 97h498l89 -97l-106 -98h-497zM760 231l22 262l132 121l65 -72l-26 -311l-106 -97z" /> |
|---|
| | | <glyph unicode="T" d="M171 1206l105 97h716l92 -97l-108 -98h-717zM432 89l35 404l133 121l65 -72l-39 -453l-105 -96zM495 810l13 149l106 97l88 -97l-17 -198l-80 -74z" /> |
|---|
| | | <glyph unicode="U" d="M128 231l88 -97l106 97l22 262l-109 121l-80 -72zM175 761l47 542l176 -195l-26 -298l-132 -123zM251 97l105 97h365l89 -97l-106 -97h-365zM760 231l22 262l132 121l65 -72l-26 -311l-106 -97zM810 810l26 298l210 195l-46 -542l-80 -74z" /> |
|---|
| | | <glyph unicode="V" horiz-adv-x="999" d="M115 93l41 469l80 73l110 -123l-37 -419l-104 -99zM177 780l45 523l176 -195l-24 -278l-132 -123zM371 93l13 138l376 370l156 34l-28 -171l-380 -371h-137zM812 830l24 278l210 195l-44 -523l-80 -73z" /> |
|---|
| | | <glyph unicode="W" d="M112 37l43 505l80 72l109 -121l-22 -262zM145 0l211 194h365l176 -194h-752zM175 761l47 542l176 -195l-26 -298l-132 -123zM460 335l33 384l107 98l89 -98l-34 -384l-106 -97zM760 231l22 262l132 121l65 -72l-43 -505zM810 810l26 298l210 195l-46 -542l-80 -74z" /> |
|---|
| | | <glyph unicode="X" horiz-adv-x="999" d="M108 0l17 190l316 424h99l-19 -214l-298 -400h-115zM205 1113l17 190h113l229 -402l-18 -214h-99zM594 402l19 212h98l239 -424l-17 -190h-112zM618 687l19 214l298 402h111l-16 -190l-313 -426h-99z" /> |
|---|
| | | <glyph unicode="Y" d="M175 761l65 -74l132 123l26 298l-176 195zM190 97l104 97h427l89 -97l-106 -97h-427zM276 652l104 96h413l90 -96l-107 -97h-413zM760 231l22 262l132 121l65 -72l-26 -311l-106 -97zM810 810l26 298l210 195l-46 -542l-80 -74z" /> |
|---|
| | | <glyph unicode="Z" d="M117 97l105 97h512l176 -194h-705zM222 1303h728l89 -97l-106 -98h-535zM225 238l11 134l202 261l104 9l7 -169l-178 -235h-146zM566 670l2 103l223 290h138l-13 -143l-175 -231z" /> |
|---|
| | | <glyph unicode="[" horiz-adv-x="642" d="M91 37l43 505l80 72l110 -121l-22 -262zM123 0l212 194h86l179 -194h-477zM155 761l42 505l177 -194l-22 -262l-132 -123zM236 1303h477l-212 -195h-86z" /> |
|---|
| | | <glyph unicode="\" horiz-adv-x="1005" d="M162 1372l261 -69l210 -422l-60 -166l-96 26zM570 551l35 99l164 -43l207 -419l-95 -266z" /> |
|---|
| | | <glyph unicode="]" horiz-adv-x="642" d="M43 0l212 194h88l176 -194h-476zM156 1303h477l-210 -195h-88zM382 231l22 262l134 121l65 -72l-43 -505zM432 810l22 262l213 194l-43 -505l-80 -74z" /> |
|---|
| | | <glyph unicode="^" horiz-adv-x="949" d="M158 802l11 138l393 363l-24 -275l-244 -226h-136zM588 1028l25 275l331 -363l-11 -138h-138z" /> |
|---|
| | | <glyph unicode="_" horiz-adv-x="964" d="M-22 -251l106 96h771l87 -96l-104 -97h-771z" /> |
|---|
| | | <glyph unicode="`" horiz-adv-x="495" d="M197 1247l174 99l132 -264l-47 -132l-130 35z" /> |
|---|
| | | <glyph unicode="a" d="M108 0l47 542l80 72l109 -121l-26 -299zM175 761l43 505l177 -194l-23 -262l-132 -123zM259 1303h752l-210 -195h-365zM276 652l104 96h413l90 -96l-107 -97h-413zM756 194l26 299l132 121l65 -72l-46 -542zM810 810l22 262l211 194l-43 -505l-80 -74z" /> |
|---|
| | | <glyph unicode="b" d="M112 37l43 505l80 72l109 -121l-22 -262zM145 0l211 194h365l89 -97l-106 -97h-559zM175 761l43 505l177 -194l-23 -262l-132 -123zM259 1303h558l90 -97l-106 -98h-365zM276 652l104 96h413l90 -96l-107 -97h-413zM760 231l22 262l132 121l65 -72l-26 -311l-106 -97z M810 810l22 262l106 97l88 -97l-26 -311l-80 -74z" /> |
|---|
| | | <glyph unicode="c" d="M128 231l88 -97l106 97l22 262l-109 121l-80 -72zM175 761l26 311l106 97l88 -97l-23 -262l-132 -123zM251 97l105 97h400l177 -194h-594zM348 1206l104 97h594l-210 -195h-400z" /> |
|---|
| | | <glyph unicode="d" d="M112 37l43 505l80 72l109 -121l-22 -262zM145 0l211 194h365l89 -97l-106 -97h-559zM175 761l43 505l177 -194l-23 -262l-132 -123zM259 1303h558l90 -97l-106 -98h-365zM760 231l22 262l132 121l65 -72l-26 -311l-106 -97zM810 810l22 262l106 97l88 -97l-26 -311 l-80 -74z" /> |
|---|
| | | <glyph unicode="e" d="M112 37l43 505l80 72l109 -121l-22 -262zM145 0l211 194h400l177 -194h-788zM175 761l43 505l177 -194l-23 -262l-132 -123zM259 1303h787l-210 -195h-400zM276 652l104 96h413l90 -96l-107 -97h-413z" /> |
|---|
| | | <glyph unicode="f" d="M112 37l43 505l80 72l109 -121l-22 -262zM175 761l43 505l177 -194l-23 -262l-132 -123zM259 1303h787l-210 -195h-400zM276 652l104 96h413l90 -96l-107 -97h-413z" /> |
|---|
| | | <glyph unicode="g" d="M128 231l30 339l78 72l110 -121l-24 -290l-106 -97zM177 788l24 284l106 97l88 -97l-21 -236l-130 -121zM251 97l88 -97h365l106 97l-89 97h-365zM348 1206l104 97h594l-210 -195h-400zM471 678l104 98h220l89 -98l-106 -97h-219zM760 231l24 290l132 121l67 -72 l-30 -339l-106 -97z" /> |
|---|
| | | <glyph unicode="h" d="M108 0l47 542l80 72l109 -121l-26 -299zM175 761l47 542l176 -195l-26 -298l-132 -123zM276 652l104 96h413l90 -96l-107 -97h-413zM756 194l26 299l132 121l65 -72l-46 -542zM810 810l26 298l210 195l-46 -542l-80 -74z" /> |
|---|
| | | <glyph unicode="i" horiz-adv-x="584" d="M212 194l26 299l133 121l65 -72l-47 -542zM266 810l26 298l211 195l-47 -542l-80 -74z" /> |
|---|
| | | <glyph unicode="j" d="M128 231l88 -97l106 97l15 175l-110 123l-80 -75zM251 97l105 97h365l89 -97l-106 -97h-365zM760 231l22 262l132 121l65 -72l-26 -311l-106 -97zM810 810l26 298l210 195l-46 -542l-80 -74z" /> |
|---|
| | | <glyph unicode="k" d="M108 0l47 542l80 72l109 -121l-26 -299zM175 761l47 542l176 -195l-26 -298l-132 -123zM276 652l104 96h413l90 -96l-107 -97h-413zM421 801l11 139l397 363h137l-11 -139l-396 -363h-138zM756 194l26 299l132 121l65 -72l-46 -542z" /> |
|---|
| | | <glyph unicode="l" d="M112 37l43 505l80 72l109 -121l-22 -262zM145 0l211 194h400l177 -194h-788zM175 761l47 542l176 -195l-26 -298l-132 -123z" /> |
|---|
| | | <glyph unicode="m" d="M108 0l47 542l80 72l109 -121l-26 -299zM175 761l43 505l177 -194l-23 -262l-132 -123zM259 1303h752l-210 -195h-365zM480 585l34 381l108 97l87 -97l-33 -381l-104 -99zM756 194l26 299l132 121l65 -72l-46 -542zM810 810l22 262l211 194l-43 -505l-80 -74z" /> |
|---|
| | | <glyph unicode="n" d="M108 0l47 542l80 72l109 -121l-26 -299zM175 761l47 542l176 -195l-26 -298l-132 -123zM274 1303h283l229 -266l-13 -140h-138zM756 194l26 299l132 121l65 -72l-46 -542zM810 810l26 298l210 195l-46 -542l-80 -74z" /> |
|---|
| | | <glyph unicode="o" d="M128 231l88 -97l106 97l22 262l-109 121l-80 -72zM175 761l26 311l106 97l88 -97l-23 -262l-132 -123zM251 97l105 97h365l89 -97l-106 -97h-365zM348 1206l104 97h365l90 -97l-106 -98h-365zM760 231l22 262l132 121l65 -72l-26 -311l-106 -97zM810 810l22 262l106 97 l88 -97l-26 -311l-80 -74z" /> |
|---|
| | | <glyph unicode="p" d="M108 0l47 542l80 72l109 -121l-26 -299zM175 761l43 505l177 -194l-23 -262l-132 -123zM259 1303h558l90 -97l-106 -98h-365zM276 652l104 96h413l90 -96l-107 -97h-413zM810 810l22 262l106 97l88 -97l-26 -311l-80 -74z" /> |
|---|
| | | <glyph unicode="q" d="M128 231l88 -97l106 97l24 288l-110 121l-78 -72zM177 788l24 284l106 97l88 -97l-21 -236l-130 -121zM251 97l105 97h190l89 -97l-106 -97h-190zM348 1206l104 97h365l90 -97l-106 -98h-365zM585 231l11 140h139l211 -231l-13 -140h-138zM775 406l9 113l132 121l67 -72 l-15 -162l-104 -97zM812 836l20 236l106 97l88 -97l-24 -284l-79 -73z" /> |
|---|
| | | <glyph unicode="r" d="M108 0l47 542l80 72l109 -121l-26 -299zM175 761l43 505l177 -194l-23 -262l-132 -123zM259 1303h558l90 -97l-106 -98h-365zM276 652l104 96h413l90 -96l-107 -97h-413zM421 372l13 138h139l341 -370l-13 -140h-140zM810 810l22 262l106 97l88 -97l-26 -311l-80 -74z " /> |
|---|
| | | <glyph unicode="s" d="M117 97l105 97h499l89 -97l-106 -97h-499zM175 761l26 311l106 97l88 -97l-23 -262l-132 -123zM276 652l104 96h413l90 -96l-107 -97h-413zM348 1206l104 97h498l89 -97l-106 -98h-497zM760 231l22 262l132 121l65 -72l-26 -311l-106 -97z" /> |
|---|
| | | <glyph unicode="t" d="M171 1206l105 97h716l92 -97l-108 -98h-717zM432 89l35 404l133 121l65 -72l-39 -453l-105 -96zM495 810l13 149l106 97l88 -97l-17 -198l-80 -74z" /> |
|---|
| | | <glyph unicode="u" d="M128 231l88 -97l106 97l22 262l-109 121l-80 -72zM175 761l47 542l176 -195l-26 -298l-132 -123zM251 97l105 97h365l89 -97l-106 -97h-365zM760 231l22 262l132 121l65 -72l-26 -311l-106 -97zM810 810l26 298l210 195l-46 -542l-80 -74z" /> |
|---|
| | | <glyph unicode="v" horiz-adv-x="999" d="M115 93l41 469l80 73l110 -123l-37 -419l-104 -99zM177 780l45 523l176 -195l-24 -278l-132 -123zM371 93l13 138l376 370l156 34l-28 -171l-380 -371h-137zM812 830l24 278l210 195l-44 -523l-80 -73z" /> |
|---|
| | | <glyph unicode="w" d="M112 37l43 505l80 72l109 -121l-22 -262zM145 0l211 194h365l176 -194h-752zM175 761l47 542l176 -195l-26 -298l-132 -123zM460 335l33 384l107 98l89 -98l-34 -384l-106 -97zM760 231l22 262l132 121l65 -72l-43 -505zM810 810l26 298l210 195l-46 -542l-80 -74z" /> |
|---|
| | | <glyph unicode="x" horiz-adv-x="999" d="M108 0l17 190l316 424h99l-19 -214l-298 -400h-115zM205 1113l17 190h113l229 -402l-18 -214h-99zM594 402l19 212h98l239 -424l-17 -190h-112zM618 687l19 214l298 402h111l-16 -190l-313 -426h-99z" /> |
|---|
| | | <glyph unicode="y" d="M175 761l65 -74l132 123l26 298l-176 195zM190 97l104 97h427l89 -97l-106 -97h-427zM276 652l104 96h413l90 -96l-107 -97h-413zM760 231l22 262l132 121l65 -72l-26 -311l-106 -97zM810 810l26 298l210 195l-46 -542l-80 -74z" /> |
|---|
| | | <glyph unicode="z" d="M117 97l105 97h512l176 -194h-705zM222 1303h728l89 -97l-106 -98h-535zM225 238l11 134l202 261l104 9l7 -169l-178 -235h-146zM566 670l2 103l223 290h138l-13 -143l-175 -231z" /> |
|---|
| | | <glyph unicode="{" horiz-adv-x="804" d="M101 652l106 96h95l89 -96l-106 -97h-95zM270 231l22 262l132 121l66 -72l-26 -311l-107 -97zM320 810l23 262l106 97l87 -97l-26 -311l-80 -74zM391 97l104 97h88l178 -194h-283zM488 1206l104 97h283l-212 -195h-88z" /> |
|---|
| | | <glyph unicode="|" horiz-adv-x="646" d="M197 -348l144 1651h191l-143 -1651h-192z" /> |
|---|
| | | <glyph unicode="}" horiz-adv-x="804" d="M43 0l212 194h88l89 -97l-106 -97h-283zM156 1303h283l90 -97l-106 -98h-88zM382 231l26 311l82 72l110 -121l-23 -262l-106 -97zM428 761l26 311l108 97l88 -97l-23 -262l-132 -123zM529 652l104 96h95l91 -96l-108 -97h-95z" /> |
|---|
| | | <glyph unicode="~" horiz-adv-x="867" d="M130 484l15 177q43 43 85 62.5t88 19.5q73 0 190 -52q71 -32 132 -32q52 0 101.5 27t105.5 83l-17 -184q-32 -37 -86.5 -58.5t-121.5 -21.5q-65 0 -127 18q-15 6 -84 39q-48 24 -85 24q-39 0 -85 -23t-111 -79z" /> |
|---|
| | | <glyph unicode="­" horiz-adv-x="962" d="M145 652l104 96h594l90 -96l-106 -97h-594z" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="799" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="1599" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="799" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="1599" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="533" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="399" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="266" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="266" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="199" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="319" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="88" /> |
|---|
| | | <glyph unicode="‐" horiz-adv-x="962" d="M145 652l104 96h594l90 -96l-106 -97h-594z" /> |
|---|
| | | <glyph unicode="‑" horiz-adv-x="962" d="M145 652l104 96h594l90 -96l-106 -97h-594z" /> |
|---|
| | | <glyph unicode="‒" horiz-adv-x="962" d="M145 652l104 96h594l90 -96l-106 -97h-594z" /> |
|---|
| | | <glyph unicode="–" horiz-adv-x="955" d="M143 614q0 25 2 38q13 162 138 276.5t285 114.5q155 0 257 -102.5t102 -253.5q0 -24 -2 -35q-15 -162 -138.5 -276.5t-287.5 -114.5q-151 0 -253.5 102t-102.5 251z" /> |
|---|
| | | <glyph unicode="—" horiz-adv-x="990" d="M54 652l76 69h849l65 -69l-78 -69h-849z" /> |
|---|
| | | <glyph unicode="’" horiz-adv-x="368" d="M169 946l25 260l104 97l89 -97l-24 -260h-194z" /> |
|---|
| | | <glyph unicode="“" horiz-adv-x="368" d="M179 1044l22 259h194l-23 -259l-106 -98z" /> |
|---|
| | | <glyph unicode="”" horiz-adv-x="633" d="M169 946l25 260l104 97l89 -97l-24 -260h-194zM432 946l24 260l106 97l90 -97l-25 -260h-195z" /> |
|---|
| | | <glyph unicode="•" horiz-adv-x="633" d="M179 1044l22 259h194l-23 -259l-106 -98zM441 1044l23 259h195l-22 -259l-106 -98z" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="319" /> |
|---|
| | | <glyph unicode=" " horiz-adv-x="399" /> |
|---|
| | | <glyph unicode="◼" horiz-adv-x="1303" d="M0 0v1303h1303v-1303h-1303z" /> |
|---|
| | | </font> |
|---|
| | | </defs></svg> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | # Font Squirrel Font-face Generator Configuration File |
|---|
| | | # Upload this file to the generator to recreate the settings |
|---|
| | | # you used to create these fonts. |
|---|
| | | |
|---|
| | | {"mode":"expert","formats":["ttf","woff","woff2","eot","svg"],"tt_instructor":"default","fix_gasp":"xy","fix_vertical_metrics":"Y","metrics_ascent":"","metrics_descent":"","metrics_linegap":"","add_spaces":"Y","add_hyphens":"Y","fallback":"none","fallback_custom":"100","options_subset":"basic","subset_custom":"","subset_custom_range":"","subset_ot_features_list":"","css_stylesheet":"stylesheet.css","filename_suffix":"-webfont","emsquare":"2048","spacing_adjustment":"0"} |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | /*Notes about grid: |
|---|
| | | Columns: 12 |
|---|
| | | Grid Width: 825px |
|---|
| | | Column Width: 55px |
|---|
| | | Gutter Width: 15px |
|---|
| | | -------------------------------*/ |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | .section {margin-bottom: 18px; |
|---|
| | | } |
|---|
| | | .section:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;} |
|---|
| | | .section {*zoom: 1;} |
|---|
| | | |
|---|
| | | .section .firstcolumn, |
|---|
| | | .section .firstcol {margin-left: 0;} |
|---|
| | | |
|---|
| | | |
|---|
| | | /* Border on left hand side of a column. */ |
|---|
| | | .border { |
|---|
| | | padding-left: 7px; |
|---|
| | | margin-left: 7px; |
|---|
| | | border-left: 1px solid #eee; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* Border with more whitespace, spans one column. */ |
|---|
| | | .colborder { |
|---|
| | | padding-left: 42px; |
|---|
| | | margin-left: 42px; |
|---|
| | | border-left: 1px solid #eee; |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | /* The Grid Classes */ |
|---|
| | | .grid1, .grid1_2cols, .grid1_3cols, .grid1_4cols, .grid2, .grid2_3cols, .grid2_4cols, .grid3, .grid3_2cols, .grid3_4cols, .grid4, .grid4_3cols, .grid5, .grid5_2cols, .grid5_3cols, .grid5_4cols, .grid6, .grid6_4cols, .grid7, .grid7_2cols, .grid7_3cols, .grid7_4cols, .grid8, .grid8_3cols, .grid9, .grid9_2cols, .grid9_4cols, .grid10, .grid10_3cols, .grid10_4cols, .grid11, .grid11_2cols, .grid11_3cols, .grid11_4cols, .grid12 |
|---|
| | | {margin-left: 15px;float: left;display: inline; overflow: hidden;} |
|---|
| | | |
|---|
| | | |
|---|
| | | .width1, .grid1, .span-1 {width: 55px;} |
|---|
| | | .width1_2cols,.grid1_2cols {width: 20px;} |
|---|
| | | .width1_3cols,.grid1_3cols {width: 8px;} |
|---|
| | | .width1_4cols,.grid1_4cols {width: 2px;} |
|---|
| | | .input_width1 {width: 49px;} |
|---|
| | | |
|---|
| | | .width2, .grid2, .span-2 {width: 125px;} |
|---|
| | | .width2_3cols,.grid2_3cols {width: 31px;} |
|---|
| | | .width2_4cols,.grid2_4cols {width: 20px;} |
|---|
| | | .input_width2 {width: 119px;} |
|---|
| | | |
|---|
| | | .width3, .grid3, .span-3 {width: 195px;} |
|---|
| | | .width3_2cols,.grid3_2cols {width: 90px;} |
|---|
| | | .width3_4cols,.grid3_4cols {width: 37px;} |
|---|
| | | .input_width3 {width: 189px;} |
|---|
| | | |
|---|
| | | .width4, .grid4, .span-4 {width: 265px;} |
|---|
| | | .width4_3cols,.grid4_3cols {width: 78px;} |
|---|
| | | .input_width4 {width: 259px;} |
|---|
| | | |
|---|
| | | .width5, .grid5, .span-5 {width: 335px;} |
|---|
| | | .width5_2cols,.grid5_2cols {width: 160px;} |
|---|
| | | .width5_3cols,.grid5_3cols {width: 101px;} |
|---|
| | | .width5_4cols,.grid5_4cols {width: 72px;} |
|---|
| | | .input_width5 {width: 329px;} |
|---|
| | | |
|---|
| | | .width6, .grid6, .span-6 {width: 405px;} |
|---|
| | | .width6_4cols,.grid6_4cols {width: 90px;} |
|---|
| | | .input_width6 {width: 399px;} |
|---|
| | | |
|---|
| | | .width7, .grid7, .span-7 {width: 475px;} |
|---|
| | | .width7_2cols,.grid7_2cols {width: 230px;} |
|---|
| | | .width7_3cols,.grid7_3cols {width: 148px;} |
|---|
| | | .width7_4cols,.grid7_4cols {width: 107px;} |
|---|
| | | .input_width7 {width: 469px;} |
|---|
| | | |
|---|
| | | .width8, .grid8, .span-8 {width: 545px;} |
|---|
| | | .width8_3cols,.grid8_3cols {width: 171px;} |
|---|
| | | .input_width8 {width: 539px;} |
|---|
| | | |
|---|
| | | .width9, .grid9, .span-9 {width: 615px;} |
|---|
| | | .width9_2cols,.grid9_2cols {width: 300px;} |
|---|
| | | .width9_4cols,.grid9_4cols {width: 142px;} |
|---|
| | | .input_width9 {width: 609px;} |
|---|
| | | |
|---|
| | | .width10, .grid10, .span-10 {width: 685px;} |
|---|
| | | .width10_3cols,.grid10_3cols {width: 218px;} |
|---|
| | | .width10_4cols,.grid10_4cols {width: 160px;} |
|---|
| | | .input_width10 {width: 679px;} |
|---|
| | | |
|---|
| | | .width11, .grid11, .span-11 {width: 755px;} |
|---|
| | | .width11_2cols,.grid11_2cols {width: 370px;} |
|---|
| | | .width11_3cols,.grid11_3cols {width: 241px;} |
|---|
| | | .width11_4cols,.grid11_4cols {width: 177px;} |
|---|
| | | .input_width11 {width: 749px;} |
|---|
| | | |
|---|
| | | .width12, .grid12, .span-12 {width: 825px;} |
|---|
| | | .input_width12 {width: 819px;} |
|---|
| | | |
|---|
| | | /* Subdivided grid spaces */ |
|---|
| | | .emptycols_left1, .prepend-1 {padding-left: 70px;} |
|---|
| | | .emptycols_right1, .append-1 {padding-right: 70px;} |
|---|
| | | .emptycols_left2, .prepend-2 {padding-left: 140px;} |
|---|
| | | .emptycols_right2, .append-2 {padding-right: 140px;} |
|---|
| | | .emptycols_left3, .prepend-3 {padding-left: 210px;} |
|---|
| | | .emptycols_right3, .append-3 {padding-right: 210px;} |
|---|
| | | .emptycols_left4, .prepend-4 {padding-left: 280px;} |
|---|
| | | .emptycols_right4, .append-4 {padding-right: 280px;} |
|---|
| | | .emptycols_left5, .prepend-5 {padding-left: 350px;} |
|---|
| | | .emptycols_right5, .append-5 {padding-right: 350px;} |
|---|
| | | .emptycols_left6, .prepend-6 {padding-left: 420px;} |
|---|
| | | .emptycols_right6, .append-6 {padding-right: 420px;} |
|---|
| | | .emptycols_left7, .prepend-7 {padding-left: 490px;} |
|---|
| | | .emptycols_right7, .append-7 {padding-right: 490px;} |
|---|
| | | .emptycols_left8, .prepend-8 {padding-left: 560px;} |
|---|
| | | .emptycols_right8, .append-8 {padding-right: 560px;} |
|---|
| | | .emptycols_left9, .prepend-9 {padding-left: 630px;} |
|---|
| | | .emptycols_right9, .append-9 {padding-right: 630px;} |
|---|
| | | .emptycols_left10, .prepend-10 {padding-left: 700px;} |
|---|
| | | .emptycols_right10, .append-10 {padding-right: 700px;} |
|---|
| | | .emptycols_left11, .prepend-11 {padding-left: 770px;} |
|---|
| | | .emptycols_right11, .append-11 {padding-right: 770px;} |
|---|
| | | .pull-1 {margin-left: -70px;} |
|---|
| | | .push-1 {margin-right: -70px;margin-left: 18px;float: right;} |
|---|
| | | .pull-2 {margin-left: -140px;} |
|---|
| | | .push-2 {margin-right: -140px;margin-left: 18px;float: right;} |
|---|
| | | .pull-3 {margin-left: -210px;} |
|---|
| | | .push-3 {margin-right: -210px;margin-left: 18px;float: right;} |
|---|
| | | .pull-4 {margin-left: -280px;} |
|---|
| | | .push-4 {margin-right: -280px;margin-left: 18px;float: right;} |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | @import url('grid_12-825-55-15.css'); |
|---|
| | | |
|---|
| | | /* |
|---|
| | | CSS Reset by Eric Meyer - Released under Public Domain |
|---|
| | | http://meyerweb.com/eric/tools/css/reset/ |
|---|
| | | */ |
|---|
| | | html, body, div, span, applet, object, iframe, |
|---|
| | | h1, h2, h3, h4, h5, h6, p, blockquote, pre, |
|---|
| | | a, abbr, acronym, address, big, cite, code, |
|---|
| | | del, dfn, em, font, img, ins, kbd, q, s, samp, |
|---|
| | | small, strike, strong, sub, sup, tt, var, |
|---|
| | | b, u, i, center, dl, dt, dd, ol, ul, li, |
|---|
| | | fieldset, form, label, legend, table, |
|---|
| | | caption, tbody, tfoot, thead, tr, th, td |
|---|
| | | {margin: 0;padding: 0;border: 0;outline: 0; |
|---|
| | | font-size: 100%;vertical-align: baseline; |
|---|
| | | background: transparent;} |
|---|
| | | body {line-height: 1;} |
|---|
| | | ol, ul {list-style: none;} |
|---|
| | | blockquote, q {quotes: none;} |
|---|
| | | blockquote:before, blockquote:after, |
|---|
| | | q:before, q:after {content: ''; content: none;} |
|---|
| | | :focus {outline: 0;} |
|---|
| | | ins {text-decoration: none;} |
|---|
| | | del {text-decoration: line-through;} |
|---|
| | | table {border-collapse: collapse;border-spacing: 0;} |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | body { |
|---|
| | | color: #000; |
|---|
| | | background-color: #dcdcdc; |
|---|
| | | } |
|---|
| | | |
|---|
| | | a { |
|---|
| | | text-decoration: none; |
|---|
| | | color: #1883ba; |
|---|
| | | } |
|---|
| | | |
|---|
| | | h1{ |
|---|
| | | font-size: 32px; |
|---|
| | | font-weight: normal; |
|---|
| | | font-style: normal; |
|---|
| | | margin-bottom: 18px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | h2{ |
|---|
| | | font-size: 18px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #container { |
|---|
| | | width: 865px; |
|---|
| | | margin: 0px auto; |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | #header { |
|---|
| | | padding: 20px; |
|---|
| | | font-size: 36px; |
|---|
| | | background-color: #000; |
|---|
| | | color: #fff; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #header span { |
|---|
| | | color: #666; |
|---|
| | | } |
|---|
| | | #main_content { |
|---|
| | | background-color: #fff; |
|---|
| | | padding: 60px 20px 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | #footer p { |
|---|
| | | margin: 0; |
|---|
| | | padding-top: 10px; |
|---|
| | | padding-bottom: 50px; |
|---|
| | | color: #333; |
|---|
| | | font: 10px Arial, sans-serif; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tabs { |
|---|
| | | width: 100%; |
|---|
| | | height: 31px; |
|---|
| | | background-color: #444; |
|---|
| | | } |
|---|
| | | .tabs li { |
|---|
| | | float: left; |
|---|
| | | margin: 0; |
|---|
| | | overflow: hidden; |
|---|
| | | background-color: #444; |
|---|
| | | } |
|---|
| | | .tabs li a { |
|---|
| | | display: block; |
|---|
| | | color: #fff; |
|---|
| | | text-decoration: none; |
|---|
| | | font: bold 11px/11px 'Arial'; |
|---|
| | | text-transform: uppercase; |
|---|
| | | padding: 10px 15px; |
|---|
| | | border-right: 1px solid #fff; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tabs li a:hover { |
|---|
| | | background-color: #00b3ff; |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tabs li.active a { |
|---|
| | | color: #000; |
|---|
| | | background-color: #fff; |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | div.huge { |
|---|
| | | |
|---|
| | | font-size: 300px; |
|---|
| | | line-height: 1em; |
|---|
| | | padding: 0; |
|---|
| | | letter-spacing: -.02em; |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | div.glyph_range { |
|---|
| | | font-size: 72px; |
|---|
| | | line-height: 1.1em; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .size10{ font-size: 10px; } |
|---|
| | | .size11{ font-size: 11px; } |
|---|
| | | .size12{ font-size: 12px; } |
|---|
| | | .size13{ font-size: 13px; } |
|---|
| | | .size14{ font-size: 14px; } |
|---|
| | | .size16{ font-size: 16px; } |
|---|
| | | .size18{ font-size: 18px; } |
|---|
| | | .size20{ font-size: 20px; } |
|---|
| | | .size24{ font-size: 24px; } |
|---|
| | | .size30{ font-size: 30px; } |
|---|
| | | .size36{ font-size: 36px; } |
|---|
| | | .size48{ font-size: 48px; } |
|---|
| | | .size60{ font-size: 60px; } |
|---|
| | | .size72{ font-size: 72px; } |
|---|
| | | .size90{ font-size: 90px; } |
|---|
| | | |
|---|
| | | |
|---|
| | | .psample_row1 { height: 120px;} |
|---|
| | | .psample_row1 { height: 120px;} |
|---|
| | | .psample_row2 { height: 160px;} |
|---|
| | | .psample_row3 { height: 160px;} |
|---|
| | | .psample_row4 { height: 160px;} |
|---|
| | | |
|---|
| | | .psample { |
|---|
| | | overflow: hidden; |
|---|
| | | position: relative; |
|---|
| | | } |
|---|
| | | .psample p { |
|---|
| | | line-height: 1.3em; |
|---|
| | | display: block; |
|---|
| | | overflow: hidden; |
|---|
| | | margin: 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .psample span { |
|---|
| | | margin-right: .5em; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .white_blend { |
|---|
| | | width: 100%; |
|---|
| | | height: 61px; |
|---|
| | | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNrs3TsKgFAMRUE/eer+NxztxMYuEWQG3ECKwwUF58ycAKixOAGAyAKILAAiCyCyACILgMgCiCyAyAIgsgAiCyCyAIgsgMgCiCwAIgsgsgAiC4DIAogsACIL0CWuZ3UGgLrIhjMA1EV2OAOAJQtgyQLwjOzmDAAiCyCyAIgsQFtkd2cAEFkAkQVAZAHaIns4A4AlC2DJAiCyACILILIAiCzAV5H1dQGAJQsgsgCILIDIAvwisl58AViyAJYsACILILIAIgvAe2T9EhxAZAFEFgCRBeiL7HAGgLrIhjMAWLIAliwAt1OAAQDwygTBulLIlQAAAABJRU5ErkJggg==); |
|---|
| | | position: absolute; |
|---|
| | | bottom: 0; |
|---|
| | | } |
|---|
| | | .black_blend { |
|---|
| | | width: 100%; |
|---|
| | | height: 61px; |
|---|
| | | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNrs3TEKhTAQRVGjibr/9QoxhY2N3Ywo50A28IrLwP9g6b1PAMSYTQAgsgAiC4DIAogsgMgCILIAIgsgsgCILIDIAogsACILILIAIguAyAKILIDIAiCyACILgMgCZCnjLWYAiFGvB0BQZJsZAFyyAC5ZAO6RXc0AILIAIguAyAKkRXYzA4DIAogsACILkBbZ3QwALlkAlywAIgsgsgAiC4DIArwVWf8uAHDJAogsACILILIAv4isH74AXLIALlkARBZAZAFEFoDnyPokOIDIAogsACILkBfZZgaAuMhWMwC4ZAE+p4x3mAEgxinAAJ+XBbPWGkwAAAAAAElFTkSuQmCC); |
|---|
| | | position: absolute; |
|---|
| | | bottom: 0; |
|---|
| | | } |
|---|
| | | .fullreverse { |
|---|
| | | background: #000 !important; |
|---|
| | | color: #fff !important; |
|---|
| | | margin-left: -20px; |
|---|
| | | padding-left: 20px; |
|---|
| | | margin-right: -20px; |
|---|
| | | padding-right: 20px; |
|---|
| | | padding: 20px; |
|---|
| | | margin-bottom:0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | .sample_table td { |
|---|
| | | padding-top: 3px; |
|---|
| | | padding-bottom:5px; |
|---|
| | | padding-left: 5px; |
|---|
| | | vertical-align: middle; |
|---|
| | | line-height: 1.2em; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .sample_table td:first-child { |
|---|
| | | background-color: #eee; |
|---|
| | | text-align: right; |
|---|
| | | padding-right: 5px; |
|---|
| | | padding-left: 0; |
|---|
| | | padding: 5px; |
|---|
| | | font: 11px/12px "Courier New", Courier, mono; |
|---|
| | | } |
|---|
| | | |
|---|
| | | code { |
|---|
| | | white-space: pre; |
|---|
| | | background-color: #eee; |
|---|
| | | display: block; |
|---|
| | | padding: 10px; |
|---|
| | | margin-bottom: 18px; |
|---|
| | | overflow: auto; |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | .bottom,.last {margin-bottom:0 !important; padding-bottom:0 !important;} |
|---|
| | | |
|---|
| | | .box { |
|---|
| | | padding: 18px; |
|---|
| | | margin-bottom: 18px; |
|---|
| | | background: #eee; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .reverse,.reversed { background: #000 !important;color: #fff !important; border: none !important;} |
|---|
| | | |
|---|
| | | #bodycomparison { |
|---|
| | | position: relative; |
|---|
| | | overflow: hidden; |
|---|
| | | font-size: 72px; |
|---|
| | | height: 90px; |
|---|
| | | white-space: nowrap; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #bodycomparison div{ |
|---|
| | | font-size: 72px; |
|---|
| | | line-height: 90px; |
|---|
| | | display: inline; |
|---|
| | | margin: 0 15px 0 0; |
|---|
| | | padding: 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #bodycomparison div span{ |
|---|
| | | font: 10px Arial; |
|---|
| | | position: absolute; |
|---|
| | | left: 0; |
|---|
| | | } |
|---|
| | | #xheight { |
|---|
| | | float: none; |
|---|
| | | position: absolute; |
|---|
| | | color: #d9f3ff; |
|---|
| | | font-size: 72px; |
|---|
| | | line-height: 90px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .fontbody { |
|---|
| | | position: relative; |
|---|
| | | } |
|---|
| | | .arialbody{ |
|---|
| | | font-family: Arial; |
|---|
| | | position: relative; |
|---|
| | | } |
|---|
| | | .verdanabody{ |
|---|
| | | font-family: Verdana; |
|---|
| | | position: relative; |
|---|
| | | } |
|---|
| | | .georgiabody{ |
|---|
| | | font-family: Georgia; |
|---|
| | | position: relative; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* @group Layout page |
|---|
| | | */ |
|---|
| | | |
|---|
| | | #layout h1 { |
|---|
| | | font-size: 36px; |
|---|
| | | line-height: 42px; |
|---|
| | | font-weight: normal; |
|---|
| | | font-style: normal; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #layout h2 { |
|---|
| | | font-size: 24px; |
|---|
| | | line-height: 23px; |
|---|
| | | font-weight: normal; |
|---|
| | | font-style: normal; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #layout h3 { |
|---|
| | | font-size: 22px; |
|---|
| | | line-height: 1.4em; |
|---|
| | | margin-top: 1em; |
|---|
| | | font-weight: normal; |
|---|
| | | font-style: normal; |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | #layout p.byline { |
|---|
| | | font-size: 12px; |
|---|
| | | margin-top: 18px; |
|---|
| | | line-height: 12px; |
|---|
| | | margin-bottom: 0; |
|---|
| | | } |
|---|
| | | #layout p { |
|---|
| | | font-size: 14px; |
|---|
| | | line-height: 21px; |
|---|
| | | margin-bottom: .5em; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #layout p.large{ |
|---|
| | | font-size: 18px; |
|---|
| | | line-height: 26px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #layout .sidebar p{ |
|---|
| | | font-size: 12px; |
|---|
| | | line-height: 1.4em; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #layout p.caption { |
|---|
| | | font-size: 10px; |
|---|
| | | margin-top: -16px; |
|---|
| | | margin-bottom: 18px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* @end */ |
|---|
| | | |
|---|
| | | /* @group Glyphs */ |
|---|
| | | |
|---|
| | | #glyph_chart div{ |
|---|
| | | background-color: #d9f3ff; |
|---|
| | | color: black; |
|---|
| | | float: left; |
|---|
| | | font-size: 36px; |
|---|
| | | height: 1.2em; |
|---|
| | | line-height: 1.2em; |
|---|
| | | margin-bottom: 1px; |
|---|
| | | margin-right: 1px; |
|---|
| | | text-align: center; |
|---|
| | | width: 1.2em; |
|---|
| | | position: relative; |
|---|
| | | padding: .6em .2em .2em; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #glyph_chart div p { |
|---|
| | | position: absolute; |
|---|
| | | left: 0; |
|---|
| | | top: 0; |
|---|
| | | display: block; |
|---|
| | | text-align: center; |
|---|
| | | font: bold 9px Arial, sans-serif; |
|---|
| | | background-color: #3a768f; |
|---|
| | | width: 100%; |
|---|
| | | color: #fff; |
|---|
| | | padding: 2px 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | #glyphs h1 { |
|---|
| | | font-family: Arial, sans-serif; |
|---|
| | | } |
|---|
| | | /* @end */ |
|---|
| | | |
|---|
| | | /* @group Installing */ |
|---|
| | | |
|---|
| | | #installing { |
|---|
| | | font: 13px Arial, sans-serif; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #installing p, |
|---|
| | | #glyphs p{ |
|---|
| | | line-height: 1.2em; |
|---|
| | | margin-bottom: 18px; |
|---|
| | | font: 13px Arial, sans-serif; |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | #installing h3{ |
|---|
| | | font-size: 15px; |
|---|
| | | margin-top: 18px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* @end */ |
|---|
| | | |
|---|
| | | #rendering h1 { |
|---|
| | | font-family: Arial, sans-serif; |
|---|
| | | } |
|---|
| | | .render_table td { |
|---|
| | | font: 11px "Courier New", Courier, mono; |
|---|
| | | vertical-align: middle; |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | /*! Generated by Font Squirrel (https://www.fontsquirrel.com) on September 22, 2021 */ |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | @font-face { |
|---|
| | | font-family: 'ds-digitalnormal'; |
|---|
| | | src: url('ds-digi-webfont.eot'); |
|---|
| | | src: url('ds-digi-webfont.eot?#iefix') format('embedded-opentype'), |
|---|
| | | url('ds-digi-webfont.woff2') format('woff2'), |
|---|
| | | url('ds-digi-webfont.woff') format('woff'), |
|---|
| | | url('ds-digi-webfont.ttf') format('truetype'), |
|---|
| | | url('ds-digi-webfont.svg#ds-digitalnormal') format('svg'); |
|---|
| | | font-weight: normal; |
|---|
| | | font-style: normal; |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | @font-face { |
|---|
| | | font-family: 'ds-digitalbold'; |
|---|
| | | src: url('ds-digib-webfont.eot'); |
|---|
| | | src: url('ds-digib-webfont.eot?#iefix') format('embedded-opentype'), |
|---|
| | | url('ds-digib-webfont.woff2') format('woff2'), |
|---|
| | | url('ds-digib-webfont.woff') format('woff'), |
|---|
| | | url('ds-digib-webfont.ttf') format('truetype'), |
|---|
| | | url('ds-digib-webfont.svg#ds-digitalbold') format('svg'); |
|---|
| | | font-weight: normal; |
|---|
| | | font-style: normal; |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | @font-face { |
|---|
| | | font-family: 'ds-digitalitalic'; |
|---|
| | | src: url('ds-digii-webfont.eot'); |
|---|
| | | src: url('ds-digii-webfont.eot?#iefix') format('embedded-opentype'), |
|---|
| | | url('ds-digii-webfont.woff2') format('woff2'), |
|---|
| | | url('ds-digii-webfont.woff') format('woff'), |
|---|
| | | url('ds-digii-webfont.ttf') format('truetype'), |
|---|
| | | url('ds-digii-webfont.svg#ds-digitalitalic') format('svg'); |
|---|
| | | font-weight: normal; |
|---|
| | | font-style: normal; |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | @font-face { |
|---|
| | | font-family: 'ds-digitalbold_italic'; |
|---|
| | | src: url('ds-digit-webfont.eot'); |
|---|
| | | src: url('ds-digit-webfont.eot?#iefix') format('embedded-opentype'), |
|---|
| | | url('ds-digit-webfont.woff2') format('woff2'), |
|---|
| | | url('ds-digit-webfont.woff') format('woff'), |
|---|
| | | url('ds-digit-webfont.ttf') format('truetype'), |
|---|
| | | url('ds-digit-webfont.svg#ds-digitalbold_italic') format('svg'); |
|---|
| | | font-weight: normal; |
|---|
| | | font-style: normal; |
|---|
| | | |
|---|
| | | } |
|---|
| | |
|---|
| | | component: () => import('@/views/mdc/base/MdcWorkshopSignage.vue') |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | path: '/workshopSignage', |
|---|
| | | component: () => import('@/views/mdc/base/WorkshopSignage.vue') |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | path: '/404', |
|---|
| | | component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404') |
|---|
| | | }, |
|---|
| | |
|---|
| | | |
|---|
| | | NProgress.configure({ showSpinner: false }) // NProgress Configuration |
|---|
| | | |
|---|
| | | const whiteList = ['/user/login', '/user/register', '/user/register-result','/user/alteration'] // no redirect whitelist |
|---|
| | | const whiteList = ['/user/login', '/user/register', '/user/register-result','/user/alteration','/workshopSignage'] // no redirect whitelist |
|---|
| | | whiteList.push(OAUTH2_LOGIN_PAGE_PATH) |
|---|
| | | |
|---|
| | | router.beforeEach((to, from, next) => { |
|---|
| | |
|---|
| | | to.matched.splice(2, to.matched.length - 3) |
|---|
| | | } |
|---|
| | | //update-end---author:scott ---date::2022-10-13 forï¼[jeecg-boot/issues/4091]å¤çº§è·¯ç±ç¼åé®é¢ #4091-------------- |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | NProgress.start() // start progress bar |
|---|
| | | |
|---|
| | | if (Vue.ls.get(ACCESS_TOKEN)) { |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <div class="full-screen-container"> |
|---|
| | | <!--页头åºå--> |
|---|
| | | <header class="page-header"> |
|---|
| | | <div></div> |
|---|
| | | |
|---|
| | | <div class="header-center">ä¸ç§èªæ车é´æºæ
§çæ¿</div> |
|---|
| | | |
|---|
| | | <div class="header-right">{{currentDateTime}}</div> |
|---|
| | | </header> |
|---|
| | | |
|---|
| | | <div class="content-container"> |
|---|
| | | <div class="content-left"> |
|---|
| | | <div class="content-card"> |
|---|
| | | <div class="card-title">ä¸å¨å¼æºç</div> |
|---|
| | | <OpenRateChart :dataSource="efficiencyData.openingRateList"/> |
|---|
| | | </div> |
|---|
| | | <div class="content-card"> |
|---|
| | | <div class="card-title">ä¸å¨å©ç¨ç</div> |
|---|
| | | <UtilizationRateChart :dataSource="efficiencyData.processingRateList"/> |
|---|
| | | </div> |
|---|
| | | <div class=" content-card"> |
|---|
| | | <div class="card-title">ä¸å¨ç次å©ç¨ç</div> |
|---|
| | | <ClassUtilizationRateChart :dataSource="efficiencyData.shiftRateList"/> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div class="content-center"> |
|---|
| | | <div class="device-container content-card"> |
|---|
| | | <div class="card-title"> |
|---|
| | | <div>å
¨å设å¤ç¶æ</div> |
|---|
| | | <div class="status-container"> |
|---|
| | | <div v-for="(item,index) in deviceStatusList" :key="index"> |
|---|
| | | <span :style="{backgroundColor:item.color}"></span> |
|---|
| | | <span :style="{color:item.color}">{{item.label}}</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <EquipmentLayout :deviceStatusList="deviceStatusList"/> |
|---|
| | | </div> |
|---|
| | | <div class="workshop-alarm-info content-card"> |
|---|
| | | <div class="card-title">å
¨åæ¥è¦ä¿¡æ¯</div> |
|---|
| | | <WorkshopAlarmInfoTable/> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div class="content-right"> |
|---|
| | | <div class="content-card"> |
|---|
| | | <div class="card-title">åä¸å¤©å©ç¨çæå</div> |
|---|
| | | <UtilizationRateRankChart/> |
|---|
| | | </div> |
|---|
| | | <div class=" content-card"> |
|---|
| | | <div class="card-title">å
¨åå¹³åè¿è¡æç</div> |
|---|
| | | <WorkshopEfficiencyAverageChart :dataSource="efficiencyData"/> |
|---|
| | | </div> |
|---|
| | | <div class="workshop-equipment-status content-card"> |
|---|
| | | <div class="card-title">å
¨åå½å设å¤ç¶æ</div> |
|---|
| | | <WorkshopEquipmentStatusChart :deviceStatusList="deviceStatusList"/> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <EquipmentDetailModal ref="EquipmentDetailModal"></EquipmentDetailModal> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import api from '@/api/mdc' |
|---|
| | | import signageApi from '@/api/signage' |
|---|
| | | import { getFileAccessHttpUrl } from '@/api/manage' |
|---|
| | | import EquipmentDetailModal from './modules/WorkshopSignage/EquipmentDetailModal' |
|---|
| | | import { message } from 'ant-design-vue' |
|---|
| | | import OpenRateChart from './modules/WorkshopSignage/OpenRateChart' |
|---|
| | | import UtilizationRateChart from './modules/WorkshopSignage/UtilizationRateChart' |
|---|
| | | import ClassUtilizationRateChart from './modules/WorkshopSignage/ClassUtilizationRateChart' |
|---|
| | | import WorkshopAlarmInfoTable from './modules/WorkshopSignage/WorkshopAlarmInfoTable' |
|---|
| | | import WorkshopEfficiencyAverageChart from './modules/WorkshopSignage/WorkshopEfficiencyAverageChart' |
|---|
| | | import UtilizationRateRankChart from './modules/WorkshopSignage/UtilizationRateRankChart' |
|---|
| | | import WorkshopEquipmentStatusChart from './modules/WorkshopSignage/WorkshopEquipmentStatusChart' |
|---|
| | | import EquipmentLayout from './modules/WorkshopSignage/EquipmentLayout' |
|---|
| | | |
|---|
| | | message.config({ |
|---|
| | | maxCount: 3 |
|---|
| | | }) |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | components: { |
|---|
| | | EquipmentLayout, |
|---|
| | | WorkshopEquipmentStatusChart, |
|---|
| | | UtilizationRateRankChart, |
|---|
| | | WorkshopEfficiencyAverageChart, |
|---|
| | | WorkshopAlarmInfoTable, |
|---|
| | | ClassUtilizationRateChart, |
|---|
| | | UtilizationRateChart, |
|---|
| | | OpenRateChart, |
|---|
| | | EquipmentDetailModal |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | currentDateTime: '', |
|---|
| | | efficiencyData: {}, |
|---|
| | | timingAcquisition: null, // å®æ¶å·æ°æ¯å¦å¼å¯ |
|---|
| | | dateTimer: null,//å®æ¶è·åå½åæ¶é´ |
|---|
| | | deviceStatusList: [ |
|---|
| | | { |
|---|
| | | label: 'è¿è¡', |
|---|
| | | color: '#00EE00' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | label: 'å¾
æº', |
|---|
| | | color: '#FFFF00' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | label: 'æ¥è¦', |
|---|
| | | color: '#FF0000' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | label: 'å
³æº', |
|---|
| | | color: '#A8A8A8' |
|---|
| | | } |
|---|
| | | ]// 设å¤ç¶ææ示ç¯åè¡¨ï¼ |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | this.getEfficiencyDataByApi() |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | getEfficiencyDataByApi() { |
|---|
| | | const that = this |
|---|
| | | signageApi.getEfficiencyDataApi() |
|---|
| | | .then(res => { |
|---|
| | | console.log('res----------------', res) |
|---|
| | | if (res.success) that.efficiencyData = res.result |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * éè¿è½¦é´Idè°ç¨æ¥å£è·å车é´è¯¦ç»ä¿¡æ¯ |
|---|
| | | * @param id 车é´Id |
|---|
| | | */ |
|---|
| | | getWorkshopDetailsByApi(id) { |
|---|
| | | api.getWorkshopDetailByWorkshopIdApi(id).then((res) => { |
|---|
| | | this.workshopDetails = res.result |
|---|
| | | this.imgSrc = this.getImgView(this.workshopDetails.backgroundImage) |
|---|
| | | this.$refs.deviceContainerRef.style.height = (this.windowHeight - this.pageHeaderHeight) + 'px' |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * å¾çé¢è§ |
|---|
| | | * @param text å¾çå°å |
|---|
| | | */ |
|---|
| | | getImgView(text) { |
|---|
| | | if (text && text.indexOf(',') > 0) { |
|---|
| | | text = text.substring(0, text.indexOf(',')) |
|---|
| | | } |
|---|
| | | return getFileAccessHttpUrl(text) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | openDetail(item) { |
|---|
| | | if (!this.isSwitchChecked) { |
|---|
| | | if (item.equipmentStatus == 0) { |
|---|
| | | this.$message.warning('设å¤å¤äºå
³æºç¶æï¼') |
|---|
| | | return false |
|---|
| | | } |
|---|
| | | this.$refs.EquipmentDetailModal.initData(item.equId) |
|---|
| | | this.$refs.EquipmentDetailModal.timerModel(item.equId) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // è·åå½åæ¶é´ |
|---|
| | | getCurrentDateTime() { |
|---|
| | | let date = new Date() |
|---|
| | | let year = date.getFullYear() //è·åå½å年份 |
|---|
| | | let mon = date.getMonth() + 1 //è·åå½åæ份 |
|---|
| | | let day = date.getDate() //è·åå½åæ¥ |
|---|
| | | // var day=date.getDay(); //è·åå½åææå |
|---|
| | | let hour = date.getHours() //è·åå°æ¶ |
|---|
| | | let min = date.getMinutes() //è·ååé |
|---|
| | | let sec = date.getSeconds() //è·åç§ |
|---|
| | | if (mon < 10) mon = '0' + mon |
|---|
| | | if (day < 10) day = '0' + day |
|---|
| | | if (hour < 10) hour = '0' + hour |
|---|
| | | if (min < 10) min = '0' + min |
|---|
| | | if (sec < 10) sec = '0' + sec |
|---|
| | | this.currentDateTime = `${year}å¹´${mon}æ${day}æ¥ ${hour}:${min}:${sec}` |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | mounted() { |
|---|
| | | // ç¦æ¢ç¨æ·éä¸å
容 |
|---|
| | | document.onselectstart = () => false |
|---|
| | | |
|---|
| | | this.dateTimer = setInterval(() => this.$nextTick(() => this.getCurrentDateTime()), 1000) |
|---|
| | | }, |
|---|
| | | beforeDestroy() { |
|---|
| | | // ç¡®ä¿éæ¯å®æ¶å¨ãäºä»¶ååæ¶èµæº |
|---|
| | | clearInterval(this.timingAcquisition) |
|---|
| | | clearInterval(this.dateTimer) |
|---|
| | | this.timingAcquisition = null |
|---|
| | | this.dateTimer = null |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style scoped lang="less"> |
|---|
| | | @font-face { |
|---|
| | | font-family: 'wgsFont'; |
|---|
| | | /*src: url('/monitor/webfontkit/ds-digib-webfont.eot'); !* IE9 Compat Modes *!*/ |
|---|
| | | src: url('../../../assets/webfontkit/ds-digib-webfont.woff') format('woff'), /* Modern Browsers */ url('../../../assets/webfontkit/ds-digib-webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('../../../assets/webfontkit/ds-digib-webfont.svg') format('svg'); /* Legacy iOS */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .full-screen-container { |
|---|
| | | height: 100%; |
|---|
| | | background-image: url("../../../assets/signage/bj.png"); |
|---|
| | | background-size: 100% 100%; |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | color: #eee; |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | |
|---|
| | | .page-header { |
|---|
| | | height: 9%; |
|---|
| | | display: flex; |
|---|
| | | |
|---|
| | | & > div { |
|---|
| | | width: 33.33%; |
|---|
| | | flex: 1; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .header-center { |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | font-weight: 500; |
|---|
| | | -webkit-text-stroke: 0.1px #000000; |
|---|
| | | background: -webkit-linear-gradient(top, #68edff 20%, #0400ff); |
|---|
| | | -webkit-background-clip: text; |
|---|
| | | -webkit-text-fill-color: transparent; |
|---|
| | | font-size: 2.2vw; |
|---|
| | | letter-spacing: 0.3vw; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .header-right { |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | font-family: wgsFont; |
|---|
| | | font-size: 2vw; |
|---|
| | | text-align: center; |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .content-container { |
|---|
| | | flex: 1; |
|---|
| | | padding: 0.8%; |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-between; |
|---|
| | | |
|---|
| | | .content-left { |
|---|
| | | width: 25%; |
|---|
| | | height: 100%; |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | justify-content: space-between; |
|---|
| | | |
|---|
| | | & > div { |
|---|
| | | height: 32.8%; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .content-center { |
|---|
| | | width: 49%; |
|---|
| | | height: 100%; |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | justify-content: space-between; |
|---|
| | | |
|---|
| | | .device-container { |
|---|
| | | height: 75%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .workshop-alarm-info { |
|---|
| | | height: 24.2%; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .content-right { |
|---|
| | | width: 25%; |
|---|
| | | height: 100%; |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | justify-content: space-between; |
|---|
| | | |
|---|
| | | & > div { |
|---|
| | | height: 32.8%; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .content-card { |
|---|
| | | border: 0.1vw solid #79b2e2; |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | |
|---|
| | | .card-title { |
|---|
| | | /*height: 13%;*/ |
|---|
| | | background-image: url("../../../assets/signage/title.png"); |
|---|
| | | background-size: 100% 100%; |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | font-size: 1vw; |
|---|
| | | padding: 0.5% 0 0.5% 1%; |
|---|
| | | color: #7AA0CC; |
|---|
| | | font-weight: bold; |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-between; |
|---|
| | | |
|---|
| | | .status-container { |
|---|
| | | display: flex; |
|---|
| | | |
|---|
| | | & > div { |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | |
|---|
| | | span:first-child { |
|---|
| | | width: 0.8vw; |
|---|
| | | height: 0.8vw; |
|---|
| | | border: 0.1vw solid #eee; |
|---|
| | | margin-right: 5%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | span { |
|---|
| | | width: 4vw; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | & > div:last-child { |
|---|
| | | flex: 1; |
|---|
| | | display: flex; |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | |
|---|
| | | :grid="{ gutter: [{xs: 0, sm: 24, md: 24, lg: 56, xl: 64, xxl: 80},20], xs: 1, sm: 2, md: 2, lg: 3, xl: 4, xxl: 4 }" |
|---|
| | | :data-source="workshopList"> |
|---|
| | | <a-list-item slot="renderItem" slot-scope="item, index"> |
|---|
| | | <div class="workshop-name" @click="navigateToWorkshopSignage(item.id)">{{item.workshopName}}</div> |
|---|
| | | <!--<div class="workshop-name" @click="navigateToWorkshopSignage(item.id)">{{item.workshopName}}</div>--> |
|---|
| | | <div class="workshop-name" @click="navigateToWorkshopSignage">{{item.workshopName}}</div> |
|---|
| | | </a-list-item> |
|---|
| | | </a-list> |
|---|
| | | </div> |
|---|
| | |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | indexStyle: 1, |
|---|
| | | workshopList: [] |
|---|
| | | workshopList: [ |
|---|
| | | { |
|---|
| | | workshopName: 'ä¸ç§èªæ', |
|---|
| | | id: '001' |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | |
|---|
| | | * @param id 车é´Id |
|---|
| | | */ |
|---|
| | | navigateToWorkshopSignage(id) { |
|---|
| | | const url = this.$router.resolve(`/MdcWorkshopSignage/${id}`).href |
|---|
| | | // const url = this.$router.resolve(`/MdcWorkshopSignage/${id}`).href |
|---|
| | | const url = this.$router.resolve('/workshopSignage').href |
|---|
| | | window.open(url, '_blank') |
|---|
| | | }, |
|---|
| | | /** |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <div id="class-utilizationRate"> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import * as echarts from 'echarts' |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | name: 'ClassUtilizationRateChart', |
|---|
| | | components: {}, |
|---|
| | | props: { |
|---|
| | | dataSource: { |
|---|
| | | type: Array, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | dataSource: { |
|---|
| | | handler(value) { |
|---|
| | | if (value) this.initChart() |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | chartContainer: null |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | window.addEventListener('resize', this.handleWindowSizeChange) |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | initChart() { |
|---|
| | | this.chartContainer = this.$echarts.init(document.getElementById('class-utilizationRate')) |
|---|
| | | const option = { |
|---|
| | | tooltip: { |
|---|
| | | fontSize: this.fontSize(0.12) |
|---|
| | | }, |
|---|
| | | xAxis: [ |
|---|
| | | { |
|---|
| | | type: 'category', |
|---|
| | | axisTick: { |
|---|
| | | show: true |
|---|
| | | }, |
|---|
| | | data: ['ææä¸', 'ææäº', 'ææä¸', 'ææå', 'ææäº', 'ææå
'], |
|---|
| | | axisLabel: { |
|---|
| | | color: '#eee', |
|---|
| | | fontSize: '80%', |
|---|
| | | fontWeight: 'bold', |
|---|
| | | interval: 0 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | axisLine: { |
|---|
| | | lineStyle: { |
|---|
| | | color: '#eee' |
|---|
| | | // width:fontSize(0.02) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | ], |
|---|
| | | yAxis: [ |
|---|
| | | { |
|---|
| | | type: 'value', |
|---|
| | | // name:'ä¸å¨å¼æºç', |
|---|
| | | axisTick: { |
|---|
| | | show: true |
|---|
| | | }, |
|---|
| | | splitLine: { //å³å®æ¯å¦æ¾ç¤ºåæ ä¸ç½æ ¼ |
|---|
| | | show: true |
|---|
| | | }, |
|---|
| | | min: 0.0, |
|---|
| | | position: 'left', |
|---|
| | | axisLabel: { |
|---|
| | | show: true, |
|---|
| | | interval: 'auto', |
|---|
| | | formatter: '{value}%', |
|---|
| | | textStyle: { |
|---|
| | | color: '#eee', |
|---|
| | | fontSize: '80%' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | axisLine: { |
|---|
| | | lineStyle: { |
|---|
| | | color: ['white'], |
|---|
| | | width: this.fontSize(0.01), |
|---|
| | | show: true |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | show: true |
|---|
| | | } |
|---|
| | | |
|---|
| | | ], |
|---|
| | | grid: { |
|---|
| | | left: '3%', |
|---|
| | | right: '3%', |
|---|
| | | bottom: '3%', |
|---|
| | | top: '15%', |
|---|
| | | containLabel: true |
|---|
| | | }, |
|---|
| | | legend: { |
|---|
| | | pageTextStyle: { |
|---|
| | | color: '#eee', |
|---|
| | | // fontSize:'100%' |
|---|
| | | fontSize: this.fontSize(0.12) |
|---|
| | | }, |
|---|
| | | top: '2%', |
|---|
| | | right: '2%', |
|---|
| | | data: [ |
|---|
| | | { |
|---|
| | | name: 'å
¨å', |
|---|
| | | textStyle: { |
|---|
| | | color: '#eee', |
|---|
| | | fontSize: this.fontSize(0.16), |
|---|
| | | fontWeight: 'bold' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | name: 'å
¨å', |
|---|
| | | type: 'bar', |
|---|
| | | axisLabel: { |
|---|
| | | show: true, |
|---|
| | | interval: 'auto', |
|---|
| | | formatter: '{value}%', |
|---|
| | | textStyle: { |
|---|
| | | color: '#eee', |
|---|
| | | fontSize: this.fontSize(0.16), |
|---|
| | | fontWeight: 'bold' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | symbolSize: this.fontSize(0.16), |
|---|
| | | // data: [38, 30, 44, 65, 23, 42], |
|---|
| | | data: this.dataSource, |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | // barBorderRadius:[20,20,0,0], |
|---|
| | | color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ |
|---|
| | | offset: 0, |
|---|
| | | color: '#96ceff' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | offset: 0.6, |
|---|
| | | color: '#67c2ff' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | offset: 1, |
|---|
| | | color: '#1195ff' |
|---|
| | | }], false) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | // { |
|---|
| | | // name: '产ä¸åååº', |
|---|
| | | // type: 'bar', |
|---|
| | | // axisLabel: { |
|---|
| | | // show: true, |
|---|
| | | // interval: 'auto', |
|---|
| | | // formatter: '{value}%', |
|---|
| | | // textStyle: { |
|---|
| | | // color: '#eee', |
|---|
| | | // fontSize: this.fontSize(0.16), |
|---|
| | | // fontWeight: 'bold' |
|---|
| | | // } |
|---|
| | | // }, |
|---|
| | | // symbolSize: this.fontSize(0.16), |
|---|
| | | // // data: [52, 44, 65, 59, 43, 21], |
|---|
| | | // data: this.dataSource, |
|---|
| | | // itemStyle: { |
|---|
| | | // normal: { |
|---|
| | | // // barBorderRadius:[20,20,0,0], |
|---|
| | | // color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ |
|---|
| | | // offset: 0, |
|---|
| | | // color: '#ffe9cc' |
|---|
| | | // }, |
|---|
| | | // { |
|---|
| | | // offset: 0.6, |
|---|
| | | // color: '#ffd46b' |
|---|
| | | // }, |
|---|
| | | // { |
|---|
| | | // offset: 1, |
|---|
| | | // color: '#ffb530' |
|---|
| | | // }], false) |
|---|
| | | // } |
|---|
| | | // } |
|---|
| | | // } |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | this.chartContainer.setOption(option, true) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | //èªéåºåä½æ¹æ³å°è£
|
|---|
| | | fontSize(res) { |
|---|
| | | var docEl = document.documentElement, |
|---|
| | | clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth |
|---|
| | | if (!clientWidth) return |
|---|
| | | var fontSize = 100 * (clientWidth / 1920) |
|---|
| | | return res * fontSize |
|---|
| | | }, |
|---|
| | | |
|---|
| | | handleWindowSizeChange() { |
|---|
| | | if (this.chartContainer) this.chartContainer.resize() |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style scoped> |
|---|
| | | |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <div class="equipment-layout-container"> |
|---|
| | | <div v-for="item in dataSource" :key="item.equipmentId" class="equipment_container" |
|---|
| | | :id="'equipment_'+item.equipmentId"> |
|---|
| | | <!--<img--> |
|---|
| | | <!--:src="require(`@/assets/signage/device${equipmentList.find(equipment=>equipment.equipmentId===item.equipmentId).type}.png`)">--> |
|---|
| | | <div> |
|---|
| | | <span :style="{backgroundColor:getStatusColor(item.oporation)}"></span> |
|---|
| | | <span>{{item.equipmentId}}</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import signageApi from '@/api/signage' |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | name: 'EquipmentLayout', |
|---|
| | | components: {}, |
|---|
| | | props: { |
|---|
| | | deviceStatusList: { |
|---|
| | | type: Array |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | dataSource: [], |
|---|
| | | equipmentList: [ |
|---|
| | | { |
|---|
| | | type: 4, |
|---|
| | | equipmentId: '69' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | type: 4, |
|---|
| | | equipmentId: '68' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | type: 4, |
|---|
| | | equipmentId: '67' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | type: 3, |
|---|
| | | equipmentId: '66' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | type: 3, |
|---|
| | | equipmentId: '65' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | type: 3, |
|---|
| | | equipmentId: '64' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | type: 2, |
|---|
| | | equipmentId: '71' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | type: 2, |
|---|
| | | equipmentId: '72' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | type: 2, |
|---|
| | | equipmentId: '73' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | type: 2, |
|---|
| | | equipmentId: '74' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | type: 2, |
|---|
| | | equipmentId: '75' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | type: 1, |
|---|
| | | equipmentId: '76' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | type: 1, |
|---|
| | | equipmentId: '77' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | type: 1, |
|---|
| | | equipmentId: '78' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | type: 1, |
|---|
| | | equipmentId: '79' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | type: 1, |
|---|
| | | equipmentId: '80' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | type: 7, |
|---|
| | | equipmentId: '95' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | type: 8, |
|---|
| | | equipmentId: '84' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | type: 8, |
|---|
| | | equipmentId: '83' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | type: 8, |
|---|
| | | equipmentId: '82' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | type: 8, |
|---|
| | | equipmentId: '81' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | type: 5, |
|---|
| | | equipmentId: '58' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | type: 5, |
|---|
| | | equipmentId: '57' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | type: 5, |
|---|
| | | equipmentId: '56' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | type: 5, |
|---|
| | | equipmentId: '55' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | type: 6, |
|---|
| | | equipmentId: '59' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | type: 6, |
|---|
| | | equipmentId: '60' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | type: 6, |
|---|
| | | equipmentId: '61' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | type: 6, |
|---|
| | | equipmentId: '62' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | type: 6, |
|---|
| | | equipmentId: '63' |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | this.getEquipmentStatusByApi() |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | //è°ç¨æ¥å£è·å设å¤ç¶æå表 |
|---|
| | | getEquipmentStatusByApi() { |
|---|
| | | const that = this |
|---|
| | | signageApi.getEquipmentStatusApi() |
|---|
| | | .then(res => { |
|---|
| | | if (res.success) that.dataSource = res.result.equipmentStatusList |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * è·åç¶æé¢è² |
|---|
| | | * @param operation ç¶æç |
|---|
| | | * @returns {*} é¢è²ç |
|---|
| | | */ |
|---|
| | | getStatusColor(operation) { |
|---|
| | | const { deviceStatusList } = this |
|---|
| | | switch (operation) { |
|---|
| | | case 3: |
|---|
| | | return deviceStatusList.find(item => item.label === 'è¿è¡').color |
|---|
| | | case 2: |
|---|
| | | return deviceStatusList.find(item => item.label === 'å¾
æº').color |
|---|
| | | case 22: |
|---|
| | | return deviceStatusList.find(item => item.label === 'æ¥è¦').color |
|---|
| | | case 0: |
|---|
| | | return deviceStatusList.find(item => item.label === 'å
³æº').color |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style scoped lang="less"> |
|---|
| | | .equipment-layout-container { |
|---|
| | | position: relative; |
|---|
| | | background-image: url("../../../../../assets/signage/layout2.png"); |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | background-size: 100% 100%; |
|---|
| | | |
|---|
| | | .equipment_container { |
|---|
| | | position: absolute; |
|---|
| | | font-size: 1vw; |
|---|
| | | |
|---|
| | | img { |
|---|
| | | width: 3vw; |
|---|
| | | height: 3vw; |
|---|
| | | } |
|---|
| | | |
|---|
| | | & > div { |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | |
|---|
| | | span:first-child { |
|---|
| | | width: 0.8vw; |
|---|
| | | height: 0.8vw; |
|---|
| | | border: 1px solid #eee; |
|---|
| | | margin-right: 5%; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | div[id^='equipment_'] { |
|---|
| | | display: none; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #equipment_95 { |
|---|
| | | display: block; |
|---|
| | | top: 55%; |
|---|
| | | right: 36%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #equipment_84 { |
|---|
| | | display: block; |
|---|
| | | top: 55%; |
|---|
| | | right: 27%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #equipment_83 { |
|---|
| | | display: block; |
|---|
| | | top: 55%; |
|---|
| | | right: 19%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #equipment_82 { |
|---|
| | | display: block; |
|---|
| | | top: 55%; |
|---|
| | | right: 11%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #equipment_81 { |
|---|
| | | display: block; |
|---|
| | | top: 55%; |
|---|
| | | right: 3%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #equipment_80 { |
|---|
| | | display: block; |
|---|
| | | top: 93%; |
|---|
| | | left: 44%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #equipment_79 { |
|---|
| | | display: block; |
|---|
| | | top: 93%; |
|---|
| | | left: 34%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #equipment_78 { |
|---|
| | | display: block; |
|---|
| | | top: 93%; |
|---|
| | | left: 24%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #equipment_77 { |
|---|
| | | display: block; |
|---|
| | | top: 93%; |
|---|
| | | left: 13%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #equipment_76 { |
|---|
| | | display: block; |
|---|
| | | top: 93%; |
|---|
| | | left: 3%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #equipment_75 { |
|---|
| | | display: block; |
|---|
| | | top: 57%; |
|---|
| | | left: 45%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #equipment_74 { |
|---|
| | | display: block; |
|---|
| | | top: 57%; |
|---|
| | | left: 35%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #equipment_73 { |
|---|
| | | display: block; |
|---|
| | | top: 57%; |
|---|
| | | left: 25%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #equipment_72 { |
|---|
| | | display: block; |
|---|
| | | top: 57%; |
|---|
| | | left: 14%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #equipment_71 { |
|---|
| | | display: block; |
|---|
| | | top: 57%; |
|---|
| | | left: 4%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #equipment_69 { |
|---|
| | | display: block; |
|---|
| | | top: 40%; |
|---|
| | | left: 2%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #equipment_68 { |
|---|
| | | display: block; |
|---|
| | | top: 40%; |
|---|
| | | left: 10%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #equipment_67 { |
|---|
| | | display: block; |
|---|
| | | top: 40%; |
|---|
| | | left: 18%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #equipment_66 { |
|---|
| | | display: block; |
|---|
| | | top: 40%; |
|---|
| | | left: 28%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #equipment_65 { |
|---|
| | | display: block; |
|---|
| | | top: 40%; |
|---|
| | | left: 37%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #equipment_64 { |
|---|
| | | display: block; |
|---|
| | | top: 40%; |
|---|
| | | left: 46%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #equipment_63 { |
|---|
| | | display: block; |
|---|
| | | top: 15%; |
|---|
| | | right: 4%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #equipment_62 { |
|---|
| | | display: block; |
|---|
| | | top: 94%; |
|---|
| | | right: 4%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #equipment_61 { |
|---|
| | | display: block; |
|---|
| | | top: 94%; |
|---|
| | | right: 14%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #equipment_60 { |
|---|
| | | display: block; |
|---|
| | | top: 94%; |
|---|
| | | right: 25%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #equipment_59 { |
|---|
| | | display: block; |
|---|
| | | top: 94%; |
|---|
| | | right: 36%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #equipment_58 { |
|---|
| | | display: block; |
|---|
| | | top: 81%; |
|---|
| | | right: 36%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #equipment_57 { |
|---|
| | | display: block; |
|---|
| | | top: 81%; |
|---|
| | | right: 25%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #equipment_56 { |
|---|
| | | display: block; |
|---|
| | | top: 81%; |
|---|
| | | right: 14%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #equipment_55 { |
|---|
| | | display: block; |
|---|
| | | top: 81%; |
|---|
| | | right: 4%; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <div id="openRate"> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import * as echarts from 'echarts' |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | name: 'OpenRateChart', |
|---|
| | | components: {}, |
|---|
| | | props: { |
|---|
| | | dataSource: { |
|---|
| | | type: Array, |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | dataSource: { |
|---|
| | | handler(value) { |
|---|
| | | if (value) this.initChart() |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | chartContainer: null |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | window.addEventListener('resize', this.handleWindowSizeChange) |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | initChart() { |
|---|
| | | this.chartContainer = this.$echarts.init(document.getElementById('openRate')) |
|---|
| | | const option = { |
|---|
| | | tooltip: { |
|---|
| | | fontSize: this.fontSize(0.12) |
|---|
| | | }, |
|---|
| | | xAxis: [ |
|---|
| | | { |
|---|
| | | type: 'category', |
|---|
| | | axisTick: { |
|---|
| | | show: true |
|---|
| | | }, |
|---|
| | | data: ['ææä¸', 'ææäº', 'ææä¸', 'ææå', 'ææäº', 'ææå
'], |
|---|
| | | axisLabel: { |
|---|
| | | color: '#eee', |
|---|
| | | fontSize: '80%', |
|---|
| | | fontWeight: 'bold', |
|---|
| | | interval: 0 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | axisLine: { |
|---|
| | | lineStyle: { |
|---|
| | | color: '#eee' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | ], |
|---|
| | | yAxis: [ |
|---|
| | | { |
|---|
| | | type: 'value', |
|---|
| | | // name:'ä¸å¨å¼æºç', |
|---|
| | | axisTick: { |
|---|
| | | show: true |
|---|
| | | }, |
|---|
| | | splitLine: { //å³å®æ¯å¦æ¾ç¤ºåæ ä¸ç½æ ¼ |
|---|
| | | show: true |
|---|
| | | }, |
|---|
| | | min: 0.0, |
|---|
| | | position: 'left', |
|---|
| | | axisLabel: { |
|---|
| | | show: true, |
|---|
| | | interval: 'auto', |
|---|
| | | formatter: '{value}%', |
|---|
| | | textStyle: { |
|---|
| | | color: '#eee', |
|---|
| | | fontSize: '80%' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | axisLine: { |
|---|
| | | lineStyle: { |
|---|
| | | color: ['white'], |
|---|
| | | width: this.fontSize(0.01), |
|---|
| | | show: true |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | show: true |
|---|
| | | } |
|---|
| | | |
|---|
| | | ], |
|---|
| | | grid: { |
|---|
| | | left: '3%', |
|---|
| | | right: '3%', |
|---|
| | | bottom: '3%', |
|---|
| | | top: '15%', |
|---|
| | | containLabel: true |
|---|
| | | }, |
|---|
| | | legend: { |
|---|
| | | pageTextStyle: { |
|---|
| | | color: '#eee', |
|---|
| | | fontSize: this.fontSize(0.12) |
|---|
| | | }, |
|---|
| | | top: '2%', |
|---|
| | | right: '2%', |
|---|
| | | data: [ |
|---|
| | | { |
|---|
| | | name: 'å
¨å', |
|---|
| | | textStyle: { |
|---|
| | | color: '#eee', |
|---|
| | | fontSize: this.fontSize(0.16), |
|---|
| | | fontWeight: 'bold' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | name: 'å
¨å', |
|---|
| | | type: 'bar', |
|---|
| | | axisLabel: { |
|---|
| | | show: true, |
|---|
| | | interval: 'auto', |
|---|
| | | formatter: '{value}%', |
|---|
| | | textStyle: { |
|---|
| | | color: '#eee', |
|---|
| | | fontSize: this.fontSize(0.16), |
|---|
| | | fontWeight: 'bold' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | symbolSize: this.fontSize(0.16), |
|---|
| | | data: this.dataSource, |
|---|
| | | itemStyle: { |
|---|
| | | color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ |
|---|
| | | offset: 0, |
|---|
| | | color: '#96ceff' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | offset: 0.6, |
|---|
| | | color: '#67c2ff' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | offset: 1, |
|---|
| | | color: '#1195ff' |
|---|
| | | }], false) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | this.chartContainer.setOption(option, true) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | //èªéåºåä½æ¹æ³å°è£
|
|---|
| | | fontSize(res) { |
|---|
| | | var docEl = document.documentElement, |
|---|
| | | clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth |
|---|
| | | if (!clientWidth) return |
|---|
| | | var fontSize = 100 * (clientWidth / 1920) |
|---|
| | | return res * fontSize |
|---|
| | | }, |
|---|
| | | |
|---|
| | | handleWindowSizeChange() { |
|---|
| | | if (this.chartContainer) this.chartContainer.resize() |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style scoped> |
|---|
| | | |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <div id="utilizationRate"> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import * as echarts from 'echarts' |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | name: 'UtilizationRateChart', |
|---|
| | | components: {}, |
|---|
| | | props: { |
|---|
| | | dataSource: { |
|---|
| | | type: Array, |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | dataSource: { |
|---|
| | | handler(value) { |
|---|
| | | if (value) this.initChart() |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | chartContainer: null |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | window.addEventListener('resize', this.handleWindowSizeChange) |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | initChart() { |
|---|
| | | this.chartContainer = this.$echarts.init(document.getElementById('utilizationRate')) |
|---|
| | | const option = { |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'axis', |
|---|
| | | // show:false //é¼ æ æ¾ç½®ä¸å»æ¯å¦æ¾ç¤ºå¼ |
|---|
| | | fontSize: this.fontSize(0.16) |
|---|
| | | }, |
|---|
| | | legend: { |
|---|
| | | top: '2%', |
|---|
| | | right: '2%', |
|---|
| | | data: [ |
|---|
| | | { |
|---|
| | | name: 'å
¨å', |
|---|
| | | textStyle: { |
|---|
| | | color: '#eee', |
|---|
| | | fontSize: this.fontSize(0.16), |
|---|
| | | fontWeight: 'bold' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | }, |
|---|
| | | |
|---|
| | | grid: { |
|---|
| | | left: '3%', |
|---|
| | | right: '3%', |
|---|
| | | bottom: '3%', |
|---|
| | | top: '15%', |
|---|
| | | containLabel: true |
|---|
| | | }, |
|---|
| | | xAxis: { |
|---|
| | | type: 'category', |
|---|
| | | axisTick: { |
|---|
| | | show: true |
|---|
| | | }, |
|---|
| | | boundaryGap: ['20%', '0%'], |
|---|
| | | data: ['ææä¸', 'ææäº', 'ææä¸', 'ææå', 'ææäº', 'ææå
'], |
|---|
| | | axisLabel: { |
|---|
| | | color: '#eee', |
|---|
| | | fontSize: '80%', |
|---|
| | | fontWeight: 'bold', |
|---|
| | | interval: 0 |
|---|
| | | |
|---|
| | | }, |
|---|
| | | axisLine: { |
|---|
| | | lineStyle: { |
|---|
| | | color: '#eee' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | }, |
|---|
| | | yAxis: |
|---|
| | | [ |
|---|
| | | { |
|---|
| | | type: 'value', |
|---|
| | | axisTick: { |
|---|
| | | show: true |
|---|
| | | }, |
|---|
| | | splitLine: { //å³å®æ¯å¦æ¾ç¤ºåæ ä¸ç½æ ¼ |
|---|
| | | show: true |
|---|
| | | }, |
|---|
| | | min: 0.0, |
|---|
| | | position: 'left', |
|---|
| | | axisLabel: { |
|---|
| | | show: true, |
|---|
| | | interval: 'auto', |
|---|
| | | formatter: '{value}%', |
|---|
| | | textStyle: { |
|---|
| | | color: '#eee', |
|---|
| | | fontSize: '80%', |
|---|
| | | fontWeight: 'bold' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | axisLine: { |
|---|
| | | lineStyle: { |
|---|
| | | color: ['white'], |
|---|
| | | width: 1, |
|---|
| | | show: true |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | ], |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | name: 'å
¨å', |
|---|
| | | type: 'line', |
|---|
| | | smooth: false, |
|---|
| | | symbol: 'circle', |
|---|
| | | symbolSize: this.fontSize(0.12), |
|---|
| | | data: this.dataSource, |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | width: '10%', |
|---|
| | | color: '#ff9e3c', |
|---|
| | | fontSize: '60%', |
|---|
| | | fontWeight: 'bold' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | this.chartContainer.setOption(option, true) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | //èªéåºåä½æ¹æ³å°è£
|
|---|
| | | fontSize(res) { |
|---|
| | | var docEl = document.documentElement, |
|---|
| | | clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth |
|---|
| | | if (!clientWidth) return |
|---|
| | | var fontSize = 100 * (clientWidth / 1920) |
|---|
| | | return res * fontSize |
|---|
| | | }, |
|---|
| | | |
|---|
| | | handleWindowSizeChange() { |
|---|
| | | if (this.chartContainer) this.chartContainer.resize() |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style scoped> |
|---|
| | | |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <div id="utilizationRate-rank"></div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import signageApi from '@/api/signage' |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | name: 'UtilizationRateRankChart', |
|---|
| | | components: {}, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | chartContainer: null, |
|---|
| | | dataSource: [] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.getUtilizationRateRankByApi() |
|---|
| | | window.addEventListener('resize', this.handleWindowSizeChange) |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | getUtilizationRateRankByApi() { |
|---|
| | | const that = this |
|---|
| | | signageApi.getUtilizationRateRankApi() |
|---|
| | | .then(res => { |
|---|
| | | if (res.success) { |
|---|
| | | that.dataSource = res.result.map(item => { |
|---|
| | | return { |
|---|
| | | name: item.topName, |
|---|
| | | value: item.topRate |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | that.initChart() |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | initChart() { |
|---|
| | | this.chartContainer = this.$echarts.init(document.getElementById('utilizationRate-rank')) |
|---|
| | | const data = this.dataSource |
|---|
| | | const colorArray = [ |
|---|
| | | { |
|---|
| | | top: '#79CEAA', |
|---|
| | | bottom: '#79CEAA' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | top: '#F589A2', |
|---|
| | | bottom: '#F589A2' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | top: '#6FBF9D', |
|---|
| | | bottom: '#6FBF9D' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | top: '#66DFE2', |
|---|
| | | bottom: '#66DFE2' |
|---|
| | | }, { |
|---|
| | | top: '#A7F0C1', |
|---|
| | | bottom: '#A7F0C1' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | top: '#FAE893', |
|---|
| | | bottom: '#FAE893' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | top: '#F7B7A0', |
|---|
| | | bottom: '#F7B7A0' |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | const defaultData = [] |
|---|
| | | const dataMax = +data.sort((x, y) => +y.value - +x.value)[0].value |
|---|
| | | let yAxisMax |
|---|
| | | if (dataMax === 0) yAxisMax = 1 // è¥æ°æ®ä¸æ大å¼ä¸º0ï¼åå°èæ¯é»è®¤å¼è®¾ç½®ä¸º1 |
|---|
| | | else yAxisMax = Math.ceil(dataMax / 5) * 5 // 设置æ±å¾èæ¯é´å½±é»è®¤å¼ï¼æ路为æ°æ®æ大å¼ææ¥è¿çè½è¢«5æ´é¤çæ°å |
|---|
| | | const yAxisInterval = yAxisMax / 5 // åæ¶å°å»åº¦å¼åæ5份 |
|---|
| | | data.forEach(item => defaultData.push(yAxisMax)) |
|---|
| | | const option = { |
|---|
| | | title: { |
|---|
| | | show: false // æ¯å¦æ¾ç¤ºæ é¢ï¼é»è®¤ä¸ºtrue |
|---|
| | | }, |
|---|
| | | grid: { |
|---|
| | | left: '3%', |
|---|
| | | right: '3%', |
|---|
| | | bottom: '3%', |
|---|
| | | top: '3%', |
|---|
| | | containLabel: true |
|---|
| | | }, |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'axis', |
|---|
| | | axisPointer: { |
|---|
| | | type: 'none' |
|---|
| | | }, |
|---|
| | | formatter: function(params) { |
|---|
| | | return '<span style="font-weight:bolder;">' + params[0].name + '</span><br/>' + |
|---|
| | | '<span style="display:inline-block; width:10px; height:10px; border-radius:100px; margin-right:5px; background:' + params[0].color.colorStops[params[0].dataIndex].color + '"></span>' + params[0].seriesName + ' : ' + params[0].value + '%' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | xAxis: { |
|---|
| | | name: '', |
|---|
| | | nameTextStyle: { |
|---|
| | | color: '#fff' |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | margin: 20, |
|---|
| | | textStyle: { |
|---|
| | | color: '#fff' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | show: true, |
|---|
| | | min: 0, |
|---|
| | | max: 'dataMax', |
|---|
| | | interval: yAxisInterval, |
|---|
| | | type: 'value', |
|---|
| | | axisTick: { |
|---|
| | | show: false |
|---|
| | | }, |
|---|
| | | splitLine: { |
|---|
| | | show: false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | yAxis: [{ |
|---|
| | | type: 'category', |
|---|
| | | inverse: true, |
|---|
| | | triggerEvent: true, |
|---|
| | | axisLabel: { |
|---|
| | | show: true, |
|---|
| | | textStyle: { |
|---|
| | | color: '#fff', |
|---|
| | | fontSize: '14', |
|---|
| | | fontWeight: 'bolder' |
|---|
| | | }, |
|---|
| | | formatter: function(value) { |
|---|
| | | return `${data.find(item => item.name === value).name}` |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | splitLine: { |
|---|
| | | show: false |
|---|
| | | }, |
|---|
| | | axisTick: { |
|---|
| | | show: false |
|---|
| | | }, |
|---|
| | | axisLine: { |
|---|
| | | show: false |
|---|
| | | }, |
|---|
| | | data: data.map(item => item.name) |
|---|
| | | }, { |
|---|
| | | type: 'category', |
|---|
| | | inverse: true, |
|---|
| | | axisTick: 'none', |
|---|
| | | axisLine: 'none', |
|---|
| | | show: true, |
|---|
| | | axisLabel: { |
|---|
| | | textStyle: { |
|---|
| | | color: '#ffffff', |
|---|
| | | fontSize: '14' |
|---|
| | | }, |
|---|
| | | formatter: function(value) { |
|---|
| | | return `${value}%` |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data: data |
|---|
| | | }], |
|---|
| | | series: [{ |
|---|
| | | name: 'å©ç¨ç', |
|---|
| | | type: 'bar', |
|---|
| | | zlevel: 1, |
|---|
| | | itemStyle: { |
|---|
| | | barBorderRadius: 100, |
|---|
| | | color: function(params) { |
|---|
| | | let num = colorArray.length |
|---|
| | | return { |
|---|
| | | type: 'linear', |
|---|
| | | colorStops: [{ |
|---|
| | | offset: 0, |
|---|
| | | color: colorArray[params.dataIndex % num].bottom |
|---|
| | | }, { |
|---|
| | | offset: 1, |
|---|
| | | color: colorArray[params.dataIndex % num].top |
|---|
| | | }, { |
|---|
| | | offset: 0, |
|---|
| | | color: colorArray[params.dataIndex % num].bottom |
|---|
| | | }, { |
|---|
| | | offset: 1, |
|---|
| | | color: colorArray[params.dataIndex % num].top |
|---|
| | | }, { |
|---|
| | | offset: 0, |
|---|
| | | color: colorArray[params.dataIndex % num].bottom |
|---|
| | | }, { |
|---|
| | | offset: 1, |
|---|
| | | color: colorArray[params.dataIndex % num].top |
|---|
| | | }, { |
|---|
| | | offset: 0, |
|---|
| | | color: colorArray[params.dataIndex % num].bottom |
|---|
| | | }, { |
|---|
| | | offset: 1, |
|---|
| | | color: colorArray[params.dataIndex % num].top |
|---|
| | | }, { |
|---|
| | | offset: 0, |
|---|
| | | color: colorArray[params.dataIndex % num].bottom |
|---|
| | | }, { |
|---|
| | | offset: 1, |
|---|
| | | color: colorArray[params.dataIndex % num].top |
|---|
| | | }, { |
|---|
| | | offset: 0, |
|---|
| | | color: colorArray[params.dataIndex % num].bottom |
|---|
| | | }] |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | barWidth: 12, |
|---|
| | | data: data |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: 'èæ¯', |
|---|
| | | type: 'bar', |
|---|
| | | barWidth: 12, |
|---|
| | | barGap: '-100%', |
|---|
| | | data: defaultData, |
|---|
| | | itemStyle: { |
|---|
| | | color: '#11294d', |
|---|
| | | barBorderRadius: 100 |
|---|
| | | } |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | this.chartContainer.setOption(option, true) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | //èªéåºåä½æ¹æ³å°è£
|
|---|
| | | fontSize(res) { |
|---|
| | | var docEl = document.documentElement, |
|---|
| | | clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth |
|---|
| | | if (!clientWidth) return |
|---|
| | | var fontSize = 100 * (clientWidth / 1920) |
|---|
| | | return res * fontSize |
|---|
| | | }, |
|---|
| | | |
|---|
| | | handleWindowSizeChange() { |
|---|
| | | if (this.chartContainer) this.chartContainer.resize() |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style scoped lang="less"> |
|---|
| | | |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <div> |
|---|
| | | <dv-scroll-board :config="config" style="width:100%;flex: 1;display: flex;flex-direction: column"/> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import signageApi from '@/api/signage' |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | name: 'WorkshopAlarmInfoTable', |
|---|
| | | components: {}, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | config: {}, |
|---|
| | | dataSource: [] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.getWorkshopAlarmInfoByApi() |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | getWorkshopAlarmInfoByApi() { |
|---|
| | | const that = this |
|---|
| | | signageApi.getWorkshopAlarmInfoApi() |
|---|
| | | .then(res => { |
|---|
| | | if (res.success) { |
|---|
| | | that.dataSource = res.result |
|---|
| | | that.initChart() |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | initChart() { |
|---|
| | | this.config = { |
|---|
| | | // indexHeader: 'åºå·', |
|---|
| | | header: ['设å¤ç¼å·', 'æ¥è¦æ¶é´', 'æ¥è¦å·'], |
|---|
| | | headerBGC: 'rgb(45, 59, 94)', |
|---|
| | | oddRowBGC: 'transparent', |
|---|
| | | evenRowBGC: 'transparent', |
|---|
| | | data: this.dataSource.map(item => { |
|---|
| | | return [item.equipmentId, item.collectTime, item.alarm] |
|---|
| | | }), |
|---|
| | | rowNum: 3, |
|---|
| | | index: false, |
|---|
| | | // columnWidth: [300, 300], |
|---|
| | | align: ['center', 'center', 'center'] |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style scoped lang="less"> |
|---|
| | | table { |
|---|
| | | width: 100%; |
|---|
| | | |
|---|
| | | th, td { |
|---|
| | | text-align: center; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | /deep/ .header, /deep/ .row-item { |
|---|
| | | border-bottom: 0.1vw solid #79b2e2; |
|---|
| | | & > div { |
|---|
| | | width: 33.33% !important; |
|---|
| | | font-size: 0.9vw; |
|---|
| | | color: #eee; |
|---|
| | | border-left: 0.1vw solid #79b2e2; |
|---|
| | | border-right: 0.1vw solid #79b2e2; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | /deep/ .header { |
|---|
| | | & > div { |
|---|
| | | height: 2vw !important; |
|---|
| | | line-height: 2vw !important; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <div id="workshop-efficiency-average"> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import * as echarts from 'echarts' |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | name: 'WorkshopEfficiencyAverageChart', |
|---|
| | | components: {}, |
|---|
| | | props: { |
|---|
| | | dataSource: { |
|---|
| | | type: Object |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | dataSource: { |
|---|
| | | handler(value) { |
|---|
| | | if (value) this.initChart() |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | chartContainer: null |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | window.addEventListener('resize', this.handleWindowSizeChange) |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | initChart() { |
|---|
| | | this.chartContainer = this.$echarts.init(document.getElementById('workshop-efficiency-average')) |
|---|
| | | const option = { |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'axis', |
|---|
| | | fontSize: this.fontSize(0.26) |
|---|
| | | }, |
|---|
| | | legend: { |
|---|
| | | // data: ['å¼æºç', 'è¿è¡ç', 'ååç'] |
|---|
| | | top: '2%', |
|---|
| | | right: '2%', |
|---|
| | | data: [ |
|---|
| | | { |
|---|
| | | name: 'å¼æºç', |
|---|
| | | textStyle: { |
|---|
| | | color: '#eee', |
|---|
| | | fontSize: this.fontSize(0.16), |
|---|
| | | fontWeight: 'bold' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: 'å©ç¨ç', |
|---|
| | | textStyle: { |
|---|
| | | color: '#eee', |
|---|
| | | fontSize: this.fontSize(0.16), |
|---|
| | | fontWeight: 'bold' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: 'ç次å©ç¨ç', |
|---|
| | | textStyle: { |
|---|
| | | color: '#eee', |
|---|
| | | fontSize: this.fontSize(0.16), |
|---|
| | | fontWeight: 'bold' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | }, |
|---|
| | | grid: { |
|---|
| | | left: '3%', |
|---|
| | | right: '3%', |
|---|
| | | bottom: '3%', |
|---|
| | | top: '15%', |
|---|
| | | containLabel: true |
|---|
| | | }, |
|---|
| | | xAxis: { |
|---|
| | | type: 'category', |
|---|
| | | axisTick: { |
|---|
| | | show: true |
|---|
| | | }, |
|---|
| | | boundaryGap: ['20%', '0%'], |
|---|
| | | data: ['ææä¸', 'ææäº', 'ææä¸', 'ææå', 'ææäº', 'ææå
'], |
|---|
| | | axisLabel: { |
|---|
| | | color: '#eee', |
|---|
| | | fontSize: '80%', |
|---|
| | | fontWeight: 'bold', |
|---|
| | | interval: 0 |
|---|
| | | }, |
|---|
| | | axisLine: { |
|---|
| | | lineStyle: { |
|---|
| | | color: '#eee' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | }, |
|---|
| | | yAxis: |
|---|
| | | [ |
|---|
| | | { |
|---|
| | | type: 'value', |
|---|
| | | axisTick: { |
|---|
| | | show: true |
|---|
| | | }, |
|---|
| | | splitLine: { //å³å®æ¯å¦æ¾ç¤ºåæ ä¸ç½æ ¼ |
|---|
| | | show: true |
|---|
| | | }, |
|---|
| | | min: 0.0, |
|---|
| | | position: 'left', |
|---|
| | | axisLabel: { |
|---|
| | | show: true, |
|---|
| | | interval: 'auto', |
|---|
| | | formatter: '{value}%', |
|---|
| | | textStyle: { |
|---|
| | | color: '#eee', |
|---|
| | | fontSize: '80%', |
|---|
| | | fontWeight: 'bold' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | axisLine: { |
|---|
| | | lineStyle: { |
|---|
| | | color: ['white'], |
|---|
| | | width: 1, |
|---|
| | | show: true |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | ], |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | name: 'å¼æºç', |
|---|
| | | type: 'line', |
|---|
| | | symbol: 'circle', |
|---|
| | | symbolSize: this.fontSize(0.12), |
|---|
| | | // data: [38, 30, 44, 65, 23, 42], |
|---|
| | | data: this.dataSource.openingRateList, |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | color: '#2274ff', |
|---|
| | | fontSize: this.fontSize(0.12), |
|---|
| | | fontWeight: 'bold' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: 'å©ç¨ç', |
|---|
| | | type: 'line', |
|---|
| | | symbol: 'circle', |
|---|
| | | symbolSize: this.fontSize(0.12), |
|---|
| | | // data: [52, 44, 65, 59, 43, 21], |
|---|
| | | data: this.dataSource.processingRateList, |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | color: '#ff9e3c', |
|---|
| | | fontSize: this.fontSize(0.12), |
|---|
| | | fontWeight: 'bold' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: 'ç次å©ç¨ç', |
|---|
| | | type: 'line', |
|---|
| | | // stack: 'æ»é', |
|---|
| | | symbol: 'circle', |
|---|
| | | symbolSize: this.fontSize(0.12), |
|---|
| | | // data: [60, 76, 59, 38, 82, 70], |
|---|
| | | data: this.dataSource.shiftRateList, |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | color: '#0aebff', |
|---|
| | | fontSize: this.fontSize(0.12), |
|---|
| | | fontWeight: 'bold' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | this.chartContainer.setOption(option, true) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | //èªéåºåä½æ¹æ³å°è£
|
|---|
| | | fontSize(res) { |
|---|
| | | var docEl = document.documentElement, |
|---|
| | | clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth |
|---|
| | | if (!clientWidth) return |
|---|
| | | var fontSize = 100 * (clientWidth / 1920) |
|---|
| | | return res * fontSize |
|---|
| | | }, |
|---|
| | | |
|---|
| | | handleWindowSizeChange() { |
|---|
| | | if (this.chartContainer) this.chartContainer.resize() |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style scoped> |
|---|
| | | |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <div> |
|---|
| | | <div id="workshop-equipment-status"></div> |
|---|
| | | <div class="circle-status-container"> |
|---|
| | | <div v-for="(value,key) in dataSource"> |
|---|
| | | <span :style="{backgroundColor:getStatusColorAndLabel(key,'color')}">{{dataSource[key]}}</span> |
|---|
| | | <span :style="{color:getStatusColorAndLabel(key,'color')}">{{getStatusColorAndLabel(key,'label')}}</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import signageApi from '@/api/signage' |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | name: 'WorkshopEquipmentStatusChart', |
|---|
| | | components: {}, |
|---|
| | | props: { |
|---|
| | | deviceStatusList: { |
|---|
| | | type: Array |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | chartContainer: null, |
|---|
| | | dataSource: {} |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.getWorkshopEquipmentStatusByApi() |
|---|
| | | window.addEventListener('resize', this.handleWindowSizeChange) |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // è°ç¨æ¥å£è·åå
¨å设å¤ç¶æ |
|---|
| | | getWorkshopEquipmentStatusByApi() { |
|---|
| | | const that = this |
|---|
| | | signageApi.getWorkshopEquipmentStatusApi() |
|---|
| | | .then(res => { |
|---|
| | | if (res.success) { |
|---|
| | | let total = 0 |
|---|
| | | for (let key in res.result) { |
|---|
| | | total += res.result[key] |
|---|
| | | } |
|---|
| | | that.dataSource = res.result |
|---|
| | | that.initChart(total) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * åå§åå¾è¡¨ |
|---|
| | | * @param total 设å¤æ°éæ»å |
|---|
| | | */ |
|---|
| | | initChart(total) { |
|---|
| | | this.chartContainer = this.$echarts.init(document.getElementById('workshop-equipment-status')) |
|---|
| | | const option = { |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'item', |
|---|
| | | show: true, |
|---|
| | | fontSize: '100%', |
|---|
| | | hoverAnimation: false, |
|---|
| | | itemStyle: { |
|---|
| | | label: { |
|---|
| | | show: true, |
|---|
| | | position: 'center', |
|---|
| | | formatter: '20' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | label: { |
|---|
| | | show: true, |
|---|
| | | hoverAnimation: false, |
|---|
| | | position: 'center', |
|---|
| | | formatter: '20' |
|---|
| | | }, |
|---|
| | | legend: { |
|---|
| | | bottom: '3%', |
|---|
| | | left: 'center', |
|---|
| | | data: [ |
|---|
| | | { |
|---|
| | | name: 'è¿è¡', |
|---|
| | | textStyle: { |
|---|
| | | color: '#eee', |
|---|
| | | fontSize: this.fontSize(0.12), |
|---|
| | | fontWeight: 'bold' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: 'å¾
æº', |
|---|
| | | textStyle: { |
|---|
| | | color: '#eee', |
|---|
| | | fontSize: this.fontSize(0.12), |
|---|
| | | fontWeight: 'bold' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: 'æ¥è¦', |
|---|
| | | textStyle: { |
|---|
| | | color: '#eee', |
|---|
| | | fontSize: this.fontSize(0.12), |
|---|
| | | fontWeight: 'bold' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | , |
|---|
| | | { |
|---|
| | | name: 'å
³æº', |
|---|
| | | textStyle: { |
|---|
| | | color: '#eee', |
|---|
| | | fontSize: this.fontSize(0.12), |
|---|
| | | fontWeight: 'bold' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | }, |
|---|
| | | color: ['#00FF19', '#FFF701', '#FC0001', '#7B7B7B'], |
|---|
| | | // 设置ç¯å½¢ä¸é´çæ°æ® |
|---|
| | | graphic: [{ |
|---|
| | | type: 'text', |
|---|
| | | z: 10, |
|---|
| | | left: '46%', |
|---|
| | | top: '42%', |
|---|
| | | style: { |
|---|
| | | fill: '#eee', |
|---|
| | | //ç¯ä¸é´çæ°æ® |
|---|
| | | text: total, |
|---|
| | | fontSize: this.fontSize(0.20), |
|---|
| | | fontWeight: 'bold' |
|---|
| | | } |
|---|
| | | |
|---|
| | | }], |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | name: 'å½å设å¤ç¶æ', |
|---|
| | | type: 'pie', |
|---|
| | | radius: ['40%', '70%'], |
|---|
| | | center: ['50%', '45%'], |
|---|
| | | // avoidLabelOverlap:false, |
|---|
| | | hoverAnimation: false, |
|---|
| | | itemStyle: { |
|---|
| | | borderColor: '#eee', |
|---|
| | | borderWidth: 2 |
|---|
| | | }, |
|---|
| | | label: { |
|---|
| | | show: false |
|---|
| | | }, |
|---|
| | | labelLine: { |
|---|
| | | show: false |
|---|
| | | }, |
|---|
| | | data: [ |
|---|
| | | { |
|---|
| | | name: 'è¿è¡', |
|---|
| | | value: this.dataSource.runCount, |
|---|
| | | textStyle: { |
|---|
| | | color: '#2278ff' |
|---|
| | | }, |
|---|
| | | //设置ç¯ä¸çæ°æ® |
|---|
| | | label: { |
|---|
| | | show: true, |
|---|
| | | hoverAnimation: false, |
|---|
| | | position: 'inner', |
|---|
| | | //ç¯ä¸çæ°æ® |
|---|
| | | formatter: function(value) { |
|---|
| | | if (value.value !== 0) return value.value |
|---|
| | | else '' |
|---|
| | | }, |
|---|
| | | fontSize: this.fontSize(0.16), |
|---|
| | | fontWeight: 'bold' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: 'å¾
æº', |
|---|
| | | value: this.dataSource.standbyCount, |
|---|
| | | textStyle: { |
|---|
| | | color: '#ff9e3c' |
|---|
| | | }, |
|---|
| | | //设置ç¯ä¸çæ°æ® |
|---|
| | | label: { |
|---|
| | | show: true, |
|---|
| | | hoverAnimation: false, |
|---|
| | | position: 'inner', |
|---|
| | | //ç¯ä¸çæ°æ® |
|---|
| | | formatter: function(value) { |
|---|
| | | if (value.value !== 0) return value.value |
|---|
| | | else '' |
|---|
| | | }, |
|---|
| | | fontSize: this.fontSize(0.16), |
|---|
| | | fontWeight: 'bold' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: 'æ¥è¦', |
|---|
| | | value: this.dataSource.alarmCount, |
|---|
| | | textStyle: { |
|---|
| | | color: '#ff9e3c' |
|---|
| | | }, |
|---|
| | | //设置ç¯ä¸çæ°æ® |
|---|
| | | label: { |
|---|
| | | show: true, |
|---|
| | | hoverAnimation: false, |
|---|
| | | position: 'inner', |
|---|
| | | //ç¯ä¸çæ°æ® |
|---|
| | | formatter: function(value) { |
|---|
| | | if (value.value !== 0) return value.value |
|---|
| | | else '' |
|---|
| | | }, |
|---|
| | | fontSize: this.fontSize(0.16), |
|---|
| | | fontWeight: 'bold' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: 'å
³æº', |
|---|
| | | value: this.dataSource.offCount, |
|---|
| | | textStyle: { |
|---|
| | | color: '#ff9e3c' |
|---|
| | | }, |
|---|
| | | //设置ç¯ä¸çæ°æ® |
|---|
| | | label: { |
|---|
| | | show: true, |
|---|
| | | hoverAnimation: false, |
|---|
| | | position: 'inner', |
|---|
| | | //ç¯ä¸çæ°æ® |
|---|
| | | formatter: function(value) { |
|---|
| | | if (value.value !== 0) return value.value |
|---|
| | | else '' |
|---|
| | | }, |
|---|
| | | fontSize: this.fontSize(0.16), |
|---|
| | | fontWeight: 'bold' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | this.chartContainer.setOption(option, true) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | //èªéåºåä½æ¹æ³å°è£
|
|---|
| | | fontSize(res) { |
|---|
| | | var docEl = document.documentElement, |
|---|
| | | clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth |
|---|
| | | if (!clientWidth) return |
|---|
| | | var fontSize = 100 * (clientWidth / 1920) |
|---|
| | | return res * fontSize |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * è·åç¶æé¢è²åæ é¢ |
|---|
| | | * @param dataSourceKey æ¥å£æ°æ®å±æ§key |
|---|
| | | * @param statusKey ç¶æå±æ§label/color |
|---|
| | | * @returns {string} é¢è²ç ææ é¢ |
|---|
| | | */ |
|---|
| | | getStatusColorAndLabel(dataSourceKey, statusKey) { |
|---|
| | | const { deviceStatusList } = this |
|---|
| | | switch (dataSourceKey) { |
|---|
| | | case 'runCount': |
|---|
| | | return deviceStatusList.find(item => item.label === 'è¿è¡')[statusKey] |
|---|
| | | case 'standbyCount': |
|---|
| | | return deviceStatusList.find(item => item.label === 'å¾
æº')[statusKey] |
|---|
| | | case 'alarmCount': |
|---|
| | | return deviceStatusList.find(item => item.label === 'æ¥è¦')[statusKey] |
|---|
| | | case 'offCount': |
|---|
| | | return deviceStatusList.find(item => item.label === 'å
³æº')[statusKey] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | handleWindowSizeChange() { |
|---|
| | | if (this.chartContainer) this.chartContainer.resize() |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style scoped lang="less"> |
|---|
| | | #workshop-equipment-status { |
|---|
| | | width: 75%; |
|---|
| | | height: 100% |
|---|
| | | } |
|---|
| | | |
|---|
| | | .circle-status-container { |
|---|
| | | width: 25%; |
|---|
| | | height: 100%; |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | justify-content: space-evenly; |
|---|
| | | |
|---|
| | | span { |
|---|
| | | display: inline-block; |
|---|
| | | font-size: 0.8vw; |
|---|
| | | } |
|---|
| | | |
|---|
| | | span:first-child { |
|---|
| | | text-align: center; |
|---|
| | | width: 2vw; |
|---|
| | | height: 2vw; |
|---|
| | | font-size: 1vw; |
|---|
| | | line-height: 2vw; |
|---|
| | | border-radius: 50%; |
|---|
| | | margin-right: 8%; |
|---|
| | | color: #000; |
|---|
| | | font-weight: bold; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
