유니 코드 문자가 JavaScript의 HTML에서 이모티콘으로 렌더링되는 것을 방지하는 방법은 무엇입니까?

119

FileFormat.Info의 검색 에서 특수 문자에 대한 유니 코드를 찾고 있습니다.

일부 문자는 ⚠ (경고 기호 \u26A0또는 ⚠) 와 같은 고전적인 흑백 글리프로 렌더링됩니다 . CSS 스타일 (예 : 색상)을 적용 할 수 있기 때문에 선호됩니다.

경고 글리프 이미지

다른 사람들은 ⌛ (모래 시계 \u231B또는 ⌛) 와 같은 최신 만화 이모티콘으로 렌더링 합니다. 나는 그것들을 완전히 스타일링 할 수 없기 때문에 바람직하지 않습니다.

모래 시계 이모티콘 이미지

Mac Chrome이나 Mac Safari가 아닌 Mac Firefox에서 모래 시계 문자를 볼 수 있기 때문에 브라우저가 이러한 변경을 수행하는 것 같습니다.

브라우저가 이전 버전 (단색)을 표시하도록 강제하는 방법이 있습니까?

업데이트 : 그것은 (아래 설명에서) 보이는이 텍스트 프리젠 테이션 선택기 , FE0E, 사용할 수있는 텍스트 - 대 - 이모티콘을 적용합니다. 선택자는 ⌛︎HTML 16 진수 또는 \u231B\uFE0EJS 와 같이 문자 코드에 공백없이 접미사로 연결됩니다 . 그러나 모든 브라우저 (예 : Chrome 및 Edge) 에서 이를 인정하지는 않습니다 .

javascript  html  css  unicode  emoji 
— Arithmomaniac
소스
CSS 규칙에서 글꼴 모음을 설정합니까?
— G-Cyrillus
2
— 一二三
1
@janaspage ︎이며 \uFE0E정확하고 (2 및 8) Safari (8 및 9)에서 잘 작동하지만 대답처럼 브라우저 지원이 불안정하고 Chrome (46)이 완전히 손상되었습니다.
— 一二三
2
이모티콘 렌더링을 제어하는 ​​표준 방법은 없습니다.
— nwellnhof
1
이 문자에 대한 글리프가 포함 된 글꼴을 적용하고 글리프가 원하는 방식으로 보이는 글꼴을 적용하기 만하면됩니다 (색상 없음, 모양 없음 또는 원하는대로).
— ShreevatsaR

답변:

133

추가] 유니 코드 변화 선택 , 텍스트, VS15을 강제하기위한 문자 ︎.
이렇게하면 이전 문자가 이모티콘 기호가 아닌 텍스트로 렌더링됩니다.

<p>🔒&#xFE0E;</p>

결과 : 🔒︎

자세히 알아보기 : 유니 코드 기호 (텍스트 또는 그림 이모티콘)

— 황
소스
1
이것은 매우 도움이되었고, 이것이 제가 지난번에 그것을 찬성 한 이유입니다. 나는 그림 이모티콘을 붙여 넣을 수있는 방법을 궁금해 하고 내가 쓰고있는 페이스 북 광고로이 보이지 않는 문자를? : PS 이것은 또한 흥미로웠다 apple.stackexchange.com/a/240450/53510
— 라이언
3
이 &#xFE0E;트릭이 특정 글꼴에 대해 작동하지 않는다는 것을 방금 깨달았습니다 . 모든 컴퓨터 (Windows, iOS, Mac, Android 등)에 설치 될 것으로 합리적으로 예상 할 수있는 글꼴을 찾는 데 어려움을 겪고 있습니다.
— 라이언
12
이 솔루션은 입력 필드에서 발생할 수도있는 기호에는 실제로 허용되지 않습니다. 나는 논리에 사용되는 기호 ↔ 에이 문제를 겪고 있으며 왜 누군가가 이것이 이모티콘이어야한다고 생각하는지 이해하지 못합니다!
— 멋진
2
다음 페이지는 이모티콘 바로 뒤에 특수 문자를 복사하여 붙여 넣어 스타일링이 아닌 평평하게 보이도록하는 데 유용합니다. 예를 들어 💬 대신 💬︎ 및 🌟 대신 ⌛︎ 및 🔒 대신 ⌛︎ (장치에 따라 다름) unicode-symbol.com/u/FE0E.html
— Ryan
15
이것은 나를 위해 예제에서 이모티콘으로 렌더링되며 Mac 10.11.6의 크롬 71입니다.
— lahwran
13

나는에서 유니 코드 문자했다 content의를 span::before하고, 나는 있었다 font-family의 span"Segoe UI 기호"로 설정합니다. 하지만 크롬은 "Segoe UI Emoji"를 글꼴로 사용하여 렌더링했습니다.

내가 설정 그러나, font-family"Segoe UI 기호"로 명시 적으로 에 대한 span::before것이 아니라 단지보다위한 span, 그것은했다.

— Glia
소스
특히 이전의 보이지 않는 문자 방법은 대부분의 주요 브라우저에서 적용되지 않기 때문에 정답이어야합니다.
— Sarah C. Corriher
2

iOS에서 이모티콘을 표시하지 않도록하는 CSS 전용 솔루션의 font-family: monospace경우 이모티콘 변형이 아닌 글리프의 텍스트 변형을 기본값으로 사용할 수 있습니다 .

— cmbuckley
소스
1

Android 글꼴은 예상대로 풍부하지 않습니다. 글꼴 파일에는 이러한 이국적인 글리프가 없으며 Android에는 글리프가없는 몇 가지 문자에 대한 해킹이 있습니다. 아이콘으로 대체됩니다.

따라서 해결책은 사이트를 웹 글꼴 (woff)과 통합하는 것입니다. FontForge로 새 글꼴 파일을 만들고 예를 들어 무료 serif TTF에서 필요한 글리프를 선택하십시오. 모든 글리프에는 1k가 필요합니다. woff 파일을 생성합니다.

사용자 정의 글꼴 패밀리를 가져 오기 위해 간단한 CSS를 준비하십시오.

style.css :

@font-face {
  font-family: 'Exotic Icons';
  src: url('exotic-icons.woff') format('woff');
}

.exotic-symbol-font {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Exotic Icons';
    font-style: normal;
    font-weight: normal;
    line-height: 1;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

index.html 파일 :

<html>
  <head>
    <meta charset="utf-8">
    <link href="style.css" rel="stylesheet"></head>
    <title>Test custom glyphs</title>
  </head>
  <body>
    <table>
      <tr>
        <td class="exotic-symbol-font">
            😭 ☠ &#x2660; a  g
        </td>       
      </tr>
    </table>
  </body>
</html>
— 다닐 S. 야 이츠 코프
소스
1

이모지가 텍스트에서 너무 눈에 띄지 않도록 단색 디스플레이를 강제하는 것이 주요 관심사라면 CSS 필터를 단독으로 또는 유니 코드 변형 선택기와 함께 사용하는 것이 좋습니다.

p.gscale { 
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}
a {
  color: #999;
  -webkit-filter: grayscale(100%) sepia(100%) saturate(400%) hue-rotate(170deg);
   filter: grayscale(100%) sepia(100%) saturate(400%) hue-rotate(170deg);
}
<p class="gscale">You've now got emoji display on 🔒lockdown🔒.</p>

<p>External Link: <a href="https://knowyourmeme.com/memes/party-hard">celebrate 🎉</a></p>
스 니펫 확장

변형 선택기와 달리 CSS 필터가 모든 것에 적용되기 때문에 이모티콘이 어떻게 렌더링되는지는 중요하지 않습니다. (나는이 아이콘을 사용하여 Wayback Machine을 가리 키도록 수정 된 하이퍼 링크의 PNG 형식 "링크 유형"아이콘을 회색조로 표시합니다.)

다만 주의 할 마음 . 자식에서 부모 요소의 필터를 재정의 할 수 없으므로이 기술을 사용하여 단락을 회색조로 표시 한 다음 단락 내의 링크를 다시 색상화할 수 없습니다. 😢

... 그래도 모든 것을 하이퍼 링크로 만들거나 그 안에 풍부한 마크 업을 허용하지 않는 상황에 유용합니다. (예 : 제목 및 설명)

그러나 이것은 CSS가 실제로 적용되지 않는 한 작동하지 않으므로 <title>유니 코드 변형 선택기보다 요소 에서 더 안정적인 두 번째 옵션을 제공 할 것입니다 (GitHub를보고 있습니다. 브라우저 탭) :

사용자가 제공 한 문자열을 <title>요소에 넣는 경우 굵게 / 기울임 꼴 / 밑줄 등과 함께 그림 이모티콘을 필터링합니다. 마크 업. (예, 그것을 놓친 사람들을 위해 표준은 <title>앰퍼샌드 이스케이프와 내가 테스트 한 모든 브라우저에서 모든 태그를 리터럴 텍스트로 해석하는 것을 제외하고 일반 텍스트로 내용을 요구합니다.)

내가 생각할 수있는 두 가지 방법은 다음과 같습니다.

  1. 최신 버전의 유니 코드가 이모티콘과 수정자를 넣는 블록과 일치 하는 수동으로 유지 관리되는 정규식 을 직접 사용합니다 .
  2. 자소 클러스터를 반복 하고 인식 된 이모 지 코드 포인트를 포함하는 모든 것을 버립니다 . (grapheme 클러스터는 기본 글리프와 모든 분음 부호 및 가시적 문자를 구성하는 기타 수정 자입니다. 링크 된 예제는 Python의 정규식 엔진을 사용하여 토큰 화 한 다음 emoji데이터베이스 용 패키지를 사용하지만 Rust는 언어의 좋은 예입니다. 반복되는 자소 클러스터는 unicode-segmentation.) 와 같은 크레이트를 통해 빠르고 쉽습니다 .)
— 소콜 로우
소스
0

데스크톱 버전 75 인 Google 크롬은 페이지를로드하는 동안 발생하는 첫 번째 유니 코드 이스케이프를 기반으로 유니 코드 문자를 렌더링하는 방식을 모호하게 만드는 것 같습니다. 예를 들어 페이지 소스에서 첫 번째 HTML 유니 코드 이스케이프로 구문 분석되고 이에 상응하는 이모티콘이없는 경우 & # 9207; 페이지에 이모티콘으로 렌더링되지 않는 이스케이프가 포함되어 있음을 Chrome에 명확히하는 것 같습니다.

— 클레이 앨런
소스
0

ssokolow의 답변을 확장 하면 필터를 사용하는 것이 좋고 최소한 간단한 글꼴을 사용하는 대신 윤곽선을 표시하지만 특정 색상을 사용하려는 경우 RGB 색상을 일련의 CSS 필터로 변환하는 것은 매우 어렵습니다.

더 좋은 옵션은 <feColorMatrix>SVG 필터 를 사용하는 것 입니다. 그레이 스케일 필터 및 데이터 URI 체계와 결합하면 RGB 및 인라인 CSS를 통해 색상을 나타낼 수 있습니다.

.violet {
  color: white;
  filter: grayscale(100%) url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><filter id='f'><feColorMatrix type='matrix' values='0.78 0 0 0 0  0 0.082 0 0 0  0 0 0.522 0 0  0 0 0 1 0'/></filter></svg>#f");
}

불행히도 (속성 또는 변수에서 가져온) 데이터로 URL을 보간 할 수는 없지만 적어도 RGB에서 CSS 필터를 계산할 필요는 없습니다.

— IllidanS4는 Monica를 다시 원합니다.
소스
-2

이모 지 유형 렌더링을 끄는 방법을 모르겠습니다. 보통 저는 font awesome 또는 glyphicons (Bootstrap 3과 함께 제공됨) 와 같은 아이콘 글꼴을 사용합니다 .

유니 코드 문자에 대해 이들을 사용하는 이점은

  1. 사이트 디자인에 맞도록 다양한 스타일 중에서 선택할 수 있습니다.
  2. 브라우저에서 일관됩니다 (유니 코드 별표 문자를 시도해 본 적이 있다면 IE와 다른 브라우저에서 차이가 있음을 알 수 있습니다).
  3. 또한 사용하려는 유니 코드 문자처럼 완전히 스타일을 지정할 수 있습니다.

유일한 단점은 브라우저가 페이지를 볼 때 다운로드 할 수 있다는 것입니다.

— dave.mcalpine
소스
-2

OSX에서 해결책은 font-family를 EmojiSymbols

— 나단
소스
-3

위의 솔루션 중 어느 것도 "Google 크롬 용 이모티콘"확장 프로그램에서 작동하지 않았습니다.

그래서 해결 방법으로 유니 코드 문자 'BALLOT BOX WITH CHECK'(U + 2611)의 스크린 샷을 만들고 PHP를 사용하여 이미지로 추가했습니다.

 $ballotBoxWithCheck='<img src="pics/U2611.png" style="height:11px;margin-bottom:-1px">'; # &#9745; or /U2611

여기에 이미지 설명 입력

참조 : https://spacetrace.org/man_card.php?tec_id=21&techname=multi-emp-vessel

— 루보 77
소스
텍스트 도구 (적절한 라이센스가 선택된 글꼴 사용)를 사용하여 Inkscape에 붙여 넣은 다음 자동 추적을 실행하여 원하는 크기로 확장 할 수있는 SVG를 얻을 수 있습니다. (가능한 한 작게 만들려면 SVG 축소기를 수동 편집과 함께 사용하여 자동 추적이 실패한 경로의 노드 수를 줄이십시오.)
— ssokolow
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.