Google แบบอักษร URL แบ่งการตรวจสอบ HTML5 บน w3.org

187

ฉันโหลดแบบอักษร 3 ขนาดต่างกันโดยใช้แท็ก HTML นี้:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,800,700,400italic|PT+Serif:400,400italic|Bree+Serif">

จนกระทั่ง ~ 1/2 สัปดาห์ก่อนสิ่งนี้รองรับw3.org validatorสำหรับ HTML5; ตอนนี้มันทำให้เกิดข้อผิดพลาดนี้:

 Line 14, Column 163: Bad value http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,800,700,400italic|PT+Serif:400,400italic|Bree+Serif for attribute href on element link: Illegal character in query: not a URL code point.

อะไรคือสิ่งที่ W3C Markup Validator ไม่ชอบตอนนี้

html w3c-validation google-font-api

— ออกุสตุ
แหล่งที่มา

346

URL เข้ารหัส|(ไพพ์อักขระ) ในhrefแอตทริบิวต์ ( %7C):

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,800,700,400italic%7CPT+Serif:400,400italic%7CBree+Serif">

— steveax
แหล่งที่มา

1

นี่เป็นปัญหาของ Google ที่สร้างขึ้นหรือมีปัญหากับเครื่องมือตรวจสอบความถูกต้อง w3 หรือไม่? ข้อกำหนดเฉพาะใด ๆ ต้องการให้มีการเข้ารหัสอักขระไปป์ในแอตทริบิวต์ HTML หรือไม่

— Mikko Rantalainen

2

@MikkoRantalainen, RFC 1738ตั้งข้อสังเกตว่าตัวละครไปป์นั้นไม่ปลอดภัย: ตัวละครอื่น ๆ ไม่ปลอดภัยเพราะเกตเวย์และตัวแทนการขนส่งอื่น ๆ บางครั้งเป็นที่รู้จักกันในการปรับเปลี่ยนตัวละครดังกล่าว อักขระเหล่านี้คือ "{", "}", "|", "\", "^", "~", "[", "]" และ "` "

— steveax

2

ผมจะคาดหวัง UTF-8 ดิบที่ถูกต้องใน UTF-8 เข้ารหัส HTML โดยไม่ต้องเข้ารหัสตัวละครอื่น ๆ แต่ที่ใช้สำหรับ HTML เช่น&, และ" 'และอักขระพิเศษเหล่านั้นจะต้องถูกเข้ารหัสด้วยกฎ HTML (เช่น&ampอื่น ๆ ) ตัวแทนผู้ใช้นั้นคาดว่าจะทำตาม RFC 3987 และแปลง IRI เป็นเปอร์เซ็นต์ที่เข้ารหัส UTF-8 ก่อนส่งผ่านทาง HTTP ( tools.ietf.org/html/rfc3987 )

— Mikko Rantalainen

10

มี 2 วิธีในการแก้ไขปัญหาการตรวจสอบนี้:

URL เข้ารหัส|อักขระ (แถบแนวตั้ง / บรรทัด) ในhrefแอตทริบิวต์ของlinkองค์ประกอบ (ตาม%7C):
```
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,800,700,400italic%7CPT+Serif:400,400italic%7CBree+Serif">
```

แยกการรวมแบบอักษรด้วยlinkองค์ประกอบหลายรายการ:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,800,700,400italic">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=PT+Serif:400,400italic">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Bree+Serif">

— dippas
แหล่งที่มา

2

ฉันรู้ว่านี่เป็นโพสต์ที่เก่ากว่า แต่ไม่มีใครทราบว่ามีข้อได้เปรียบด้านประสิทธิภาพในการแยก<link>แท็กหรือไม่ Google บีบอัดหรือไม่หากมีหลายแบบอักษรในการโทรครั้งเดียว

— Patrick Moore

@PatrickMoore 2 สิ่ง: ก)เซิร์ฟเวอร์ของคุณอัปโหลด / ตอบสนองความเร็วเทียบกับผู้ใช้ปลายทางของคุณb)เวลาในการสร้างการเชื่อมต่ออื่น (เวลาตอบสนองของเซิร์ฟเวอร์เทียบกับเวลาตอบสนองของผู้ใช้ปลายทาง) ตามหลักเหตุผลถ้าคุณโหลดแบบอักษร 2 "หนัก" และหน้าเว็บของคุณโหลดเร็วการโหลดแยกต่างหาก (ในลักษณะคล้ายกัน) อาจทำให้โหลดเร็วขึ้น แต่มันขึ้นอยู่กับก) & b)

— jave.web

7

http://www.utf8-chartable.de/

คุณต้องแทนที่อักขระ | ด้วยอักขระ UTF-8 ที่สอดคล้องกันซึ่งให้

href="http://fonts.googleapis.com/css?family=Cookie%7cAmaranth%7cKaushan+Script%7cCousine%7cBilbo+Swash+Caps%7cRancho&amp;effect=shadow-multiple"

— lapouth
แหล่งที่มา

-3

กรณีของฉันเป็นตัวละครตัวแบ่งเส้นบ้า โปรดดูภาพที่แนบมา

— สมิ ธ ดี
แหล่งที่มา

-4

ฉันวาดภาพ&กับ " & amp; " และทำงานได้ดีตัวอย่าง:

<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700&amp;subset=latin,latin-ext' rel='stylesheet' type='text/css' />

— ออสการ์ Tello
แหล่งที่มา

1

คำถามนี้เกี่ยวกับ|ตัวละครไม่ใช่&;-)

— jave.web