SMusatov
/
font-Roboto-Classic
mirror of https://github.com/googlefonts/Roboto-Classic.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243
							
<html>
  <head>
    <meta charset="utf-8"/>
    <style>
      html{
          font-family: sans-serif;
            font-feature-settings: 'kern' off;
      }
      
    @font-face {font-family: 'Roboto';
    src: url('./v2_138_fonts/Roboto-Thin.ttf') format('truetype');
    font-weight: 100;
    font-stretch: normal;
    font-style: normal;}

    @font-face {font-family: 'Roboto';
    src: url('./v2_138_fonts/Roboto-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-stretch: normal;
    font-style: italic;}

    @font-face {font-family: 'Roboto';
    src: url('./v2_138_fonts/Roboto-Light.ttf') format('truetype');
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;}

    @font-face {font-family: 'Roboto';
    src: url('./v2_138_fonts/Roboto-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-stretch: normal;
    font-style: italic;}

    @font-face {font-family: 'Roboto';
    src: url('./v2_138_fonts/Roboto-Italic.ttf') format('truetype');
    font-weight: 400;
    font-stretch: normal;
    font-style: italic;}

    @font-face {font-family: 'Roboto';
    src: url('./v2_138_fonts/Roboto-Regular.ttf') format('truetype');
    font-weight: 400;
    font-stretch: normal;
    font-style: normal;}

    @font-face {font-family: 'Roboto';
    src: url('./v2_138_fonts/Roboto-Medium.ttf') format('truetype');
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;}

    @font-face {font-family: 'Roboto';
    src: url('./v2_138_fonts/Roboto-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-stretch: normal;
    font-style: italic;}

    @font-face {font-family: 'Roboto';
    src: url('./v2_138_fonts/Roboto-Bold.ttf') format('truetype');
    font-weight: 700;
    font-stretch: normal;
    font-style: normal;}

    @font-face {font-family: 'Roboto';
    src: url('./v2_138_fonts/Roboto-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-stretch: normal;
    font-style: italic;}

    @font-face {font-family: 'Roboto';
    src: url('./v2_138_fonts/Roboto-Black.ttf') format('truetype');
    font-weight: 900;
    font-stretch: normal;
    font-style: normal;}

    @font-face {font-family: 'Roboto';
    src: url('./v2_138_fonts/Roboto-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-stretch: normal;
    font-style: italic;}


    @font-face {font-family: 'Roboto';
    src: url('./v2_138_fonts/RobotoCondensed-Bold.ttf') format('truetype');
    font-weight: 700;
    font-stretch: condensed;
    font-style: normal;}

    @font-face {font-family: 'Roboto';
    src: url('./v2_138_fonts/RobotoCondensed-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-stretch: condensed;
    font-style: italic;}


    @font-face {font-family: 'Roboto';
    src: url('./v2_138_fonts/RobotoCondensed-Medium.ttf') format('truetype');
    font-weight: 500;
    font-stretch: condensed;
    font-style: normal;}


    @font-face {font-family: 'Roboto';
    src: url('./v2_138_fonts/RobotoCondensed-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-stretch: condensed;
    font-style: italic;}


    @font-face {font-family: 'Roboto';
    src: url('./v2_138_fonts/RobotoCondensed-Italic.ttf') format('truetype');
    font-weight: 400;
    font-stretch: condensed;
    font-style: italic;}


    @font-face {font-family: 'Roboto';
    src: url('./v2_138_fonts/RobotoCondensed-Light.ttf') format('truetype');
    font-weight: 300;
    font-stretch: condensed;
    font-style: normal;}


    @font-face {font-family: 'Roboto';
    src: url('./v2_138_fonts/RobotoCondensed-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-stretch: condensed;
    font-style: italic;}


    @font-face {font-family: 'Roboto';
    src: url('./v2_138_fonts/RobotoCondensed-Regular.ttf') format('truetype');
    font-weight: 400;
    font-stretch: condensed;
    font-style: normal;}    

      
    @font-face {font-family: 'Roboto-VF';
    src: url('../../Roboto-min-VF.ttf') format('truetype');
    font-weight: 1 999;
    font-style: oblique 0deg 12deg;
    font-stretch: 75% 100%;}
      
    .RobotoNormal{
        position: absolute;
        font-family: Roboto;
        font-size: 48px;
        top: 150px;
    }
      
    .RobotoVF{
        position: absolute;
        font-family: Roboto-VF;
        font-size: 48px;
        top: 150px;
        color: cyan;
    }
    .ctrl{
        position: fixed;
        right: 0;
        top: 0;
        z-index:100;
        color: white;
    }
    #container{
        font-weight: 250;
    }
    .info{
        position: fixed;
    }
    </style>
  </head>
  <body>

<script>

    function weightChange(weight) {
        var d = document.getElementById("container-weight");
        d.setAttribute('style', 'font-weight:'+ weight)
    }

    function styleChange(style) {
        var d = document.getElementById("container-style");
        d.setAttribute('style', 'font-style:' + style)
    }
    function widthChange(width) {
        var d = document.getElementById("container-width");
        d.setAttribute('style', 'font-stretch:' + width)
    }
</script>

<div>
  <h1>varLib VF vs v2.138 unhinted</h1>
  <h3>Static fonts, <span style="color: cyan">Variable Font Instances</span>  </h3>
  <div class='ctrl'>
    <select id="w" onchange="weightChange(this.value)">
      <option value="250">250</option>
      <option value="300">300</option>
      <option value="400">400</option>
      <option value="500">500</option>
      <option value="700">700</option>
      <option value="900">900</option>
    </select>

    <select id="s" onchange="styleChange(this.value)">
      <option value="normal">normal</option>
      <option value="italic">italic</option>
    </select>

  <select id="c" onchange="widthChange(this.value)">
      <option value="normal">normal</option>
      <option value="condensed">condensed</option>
    </select>
  </div>
</div>
</div>


<div id='container-style' style='font-style: normal'>
<div id='container-weight' style='font-weight: 250'>
<div id='container-width' style='font-stretch: normal'>
      
<div class="RobotoNormal">
    <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.</p>

    <p>I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.</p>

    <p>When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream; and, as I lie close to the earth, a thousand unknown plants are noticed by me: when I hear the buzz of the little world among the stalks, and grow familiar with the countless indescribable forms of the insects and flies, then I feel the presence of the Almighty, who formed us in his own image, and the breath</p>
</div>

<div class="RobotoVF">
    <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.</p>

    <p>I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.</p>

    <p>When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream; and, as I lie close to the earth, a thousand unknown plants are noticed by me: when I hear the buzz of the little world among the stalks, and grow familiar with the countless indescribable forms of the insects and flies, then I feel the presence of the Almighty, who formed us in his own image, and the breath</p>
</div>
</div></div>
    </div>
  </body>
</html>