Validasi Html5 Link Google Font

Masih membahas perihal Validasi HTML5, artikel ini yakni artikel rangkuman dari artikel yang sudah dibahas oleh Link Font Di Head Blog Error Validasi HTML5 dan Validasi HTML5 Pada Link Google Font. Alasan link tersebut tidak valid, alasannya yakni url pada link tersebut dianggap sebagai url ilegal.

Sepertinya ada perbaikan gres pada sistem HTML5. Untuk mengatasi problem tersebut terdapat 3 pilihan untuk mengatasinya, oleh alasannya yakni itu silakan di simak.

Cara Pertama : Memisahkan Jenis Font

Contoh Error pada link font google.

<link href='http://fonts.googleapis.com/css?family=Roboto:700,400,300,300italic,400italic,700italic|Oswald' rel='stylesheet' type='text/css'/>

Dalam font diatas terdapat 2 jenis varian font antara lain jenis Roboto dan Oswald, kedua font tersebut digabungkan dalam satu link dengan instruksi pemisah | . Untuk mengatasinya Anda harus pisahkan kedua varian font tersebut menjadi dua link, menyerupai dibawah ini.

<link href='http://fonts.googleapis.com/css?family=Roboto:700,400,300,300italic,400italic,700italic' rel='stylesheet' type='text/css'/> <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

Cara Kedua : Merubah Font Menjadi CSS

Silakan Anda buka link pada font google untuk melihat instruksi CSS yang akan dipasang.

<link href='http://fonts.googleapis.com/css?family=Roboto:700,400,300,300italic,400italic,700italic' rel='stylesheet' type='text/css'/> <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

Perhatikan url yang Saya tandai, silakan Anda buka di browser Anda url tersebut. Anda akan menemukan instruksi CSS yang akan dipasang. Dari kedua URL tersebut di sanggup CSS menyerupai dibawah ini.

@font-face {   font-family:'Oswald';   font-style:normal;   font-weight:400;   src:local('Oswald Regular'),local('Oswald-Regular'),url(http://themes.googleusercontent.com/static/fonts/oswald/v8/-g5pDUSRgvxvOl5u-a_WHw.woff) format('woff'); }  @font-face {   font-family:'Roboto';   font-style:normal;   font-weight:300;   src:local('Roboto Light'),local('Roboto-Light'),url(http://themes.googleusercontent.com/static/fonts/roboto/v10/Hgo13k-tfSpn0qi1SFdUfT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'); }  @font-face {   font-family:'Roboto';   font-style:normal;   font-weight:400;   src:local('Roboto Regular'),local('Roboto-Regular'),url(http://themes.googleusercontent.com/static/fonts/roboto/v10/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff'); }  @font-face {   font-family:'Roboto';   font-style:normal;   font-weight:700;   src:local('Roboto Bold'),local('Roboto-Bold'),url(http://themes.googleusercontent.com/static/fonts/roboto/v10/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'); }  @font-face {   font-family:'Roboto';   font-style:italic;   font-weight:300;   src:local('Roboto Light Italic'),local('Roboto-LightItalic'),url(http://themes.googleusercontent.com/static/fonts/roboto/v10/7m8l7TlFO-S3VkhHuR0at4bN6UDyHWBl620a-IRfuBk.woff) format('woff'); }  @font-face {   font-family:'Roboto';   font-style:italic;   font-weight:400;   src:local('Roboto Italic'),local('Roboto-Italic'),url(http://themes.googleusercontent.com/static/fonts/roboto/v10/1pO9eUAp8pSF8VnRTP3xnvesZW2xOQ-xsNqO47m55DA.woff) format('woff'); }  @font-face {   font-family:'Roboto';   font-style:italic;   font-weight:700;   src:local('Roboto Bold Italic'),local('Roboto-BoldItalic'),url(http://themes.googleusercontent.com/static/fonts/roboto/v10/t6Nd4cfPRhZP44Q5QAjcC4bN6UDyHWBl620a-IRfuBk.woff) format('woff'); }

Selanjutnya silakan pasang instruksi tersebut diatas instruksi ]]></b:skin> atau instruksi </style>.

Cara Ketiga : Merubah Kode | Menjadi Kode %7

Perhatikan instruksi dibawah, ini yakni pola link google font yang tidak valid.

<link href='http://fonts.googleapis.com/css?family=Roboto:700,400,300,300italic,400italic,700italic|Oswald' rel='stylesheet' type='text/css'/>

Perhatikan instruksi yang Saya tandai, biar menciptakan link tersebut Valid HTML5 silakan Anda ganti instruksi tersebut dengan instruksi %7.
Sumber http://kang-mousir.blogspot.com

Validasi Html5 Link Google Font

4/ 5

Oleh Admin