Html Textarea Yazı Tipini Script ile Değiştirme

Html Textarea Yazı Tipini Script ile Değiştirme

Html sayfasında kullanacağımız metin alanını yaz tipini değiştirmeyi yani html textarea font family selector işlemini kodlarıyla birlikte anlatmaya ve bunu canlı bir örnekle desteklemeye çalışacağım. Script kodu Html kodunun içinde olacak.

Css Uygulama Kodu

  .fontsecim{
   background-color: #252525;
   width:100%;
   height:auto;
   border:5px solid #0068FF;
   text-align:center;
  }
 
  @font-face {
   font-family: 'Oswald', sans-serif;
   @import url('https://fonts.googleapis.com/css?family=Oswald&display=swap');
  }
  @font-face {
   font-family: 'Montserrat', sans-serif;
   @import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
  }
  @font-face {
   font-family: 'Rajdhani', sans-serif;
   @import url('https://fonts.googleapis.com/css?family=Rajdhani&display=swap');
  }
 
  .baslik{
   background-color: #0068FF;
   color:white;
   font-size:20px;
   font-weight:bold;
   text-align:center; 
  }

  #fontse{
   margin-top:10px;
  }
  #metin{
   width:92%;
   border:3px solid #0068FF;
   margin:10px;
   font-size:16px;
  }

Html Uygulama Kodu

 <div class="fontsecim">
 <div class="baslik"> Font Seçimi </div>
  <div class="secim"> 
   <select id="fontse" name="fontse" onchange="fontgüncelleme();">
    <option> Oswald </option>
    <option> Montserrat </option>
    <option> Dosis </option>
   </select>
  </div>
  <div class="metinalani">
   <textarea id="metin" style="font-family: 'Oswald', sans-serif;" cols="57" rows="6">Bu Bir Font Seçimi Denemesidir</textarea>
  </div>
 <script>
  function fontgüncelleme() {
   var selector = document.getElementById("fontse");
   var family = selector.options[selector.selectedIndex].value;
   var metinf = document.getElementById("metin");
   metinf.style.fontFamily = family;        
  }
 </script>
 </div>

Uygulama Çalışan Canlı Örneği

Font Seçimi

Oswald Montserrat Dosis

Bu Bir Font Seçimi Denemesidir