#html #css #web #svg #fonts
#HTML #css — код #паутина #svg #шрифты
Вопрос:
У меня есть логотип SVG, который был разработан с использованием шрифта Nunito Sans. Шрифт корректно отображается на веб-сайте только в том случае, если он установлен на компьютере. Пожалуйста, найдите ниже код из SVG-изображения
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 501.58 501.58"><defs><style>.cls-1{fill:#243d62;stroke:#1d1d1b;stroke-miterlimit:10;}.cls-2{font-size:99.93px;fill:#fff;font-family:Nunito Sans;font-weight:700;}.cls-3{letter-spacing:-1px;}</style></defs><title>Logo512x512</title><circle class="cls-1" cx="250.79" cy="250.79" r="250.29"/><text class="cls-2" transform="translate(25.25 279.94)"><tspan class="cls-3">P</tspan><tspan x="64.66" y="0">acAnGO</tspan></text></svg>
Я попытался сохранить шрифты на веб-сайте, но это так и не сработало. Поскольку Nunito Sans принадлежит Google, есть ли способ назначить его через веб-ссылку? Если нет, то каким будет правильный код для привязки шрифта к логотипу SVG? Спасибо
Ответ №1:
Для этого есть два решения:
- Перед экспортом вашего логотипа в формате SVG обязательно преобразуйте текст в контуры. Обычно вы можете сделать это в Sketch или Illustrator довольно легко, нажав правой кнопкой мыши на выделенный текст. Я преобразовал его в кривые с помощью программы (Affinity Designer), и ниже приведен результат. Это можно сделать с помощью любого редактора. Если вы используете код, вы должны увидеть логотип так, как он задуман.
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 2090 2090" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-miterlimit:10;"><circle cx="1044.96" cy="1044.96" r="1042.88" style="fill:#243d62;stroke:#1d1d1b;stroke-width:4.17px;"/><g><path d="M136.853,872.872l128.243,0c31.367,0 55.795,7.842 73.282,23.525c17.488,15.684 26.232,37.682 26.232,65.996c-0,28.313 -8.744,50.381 -26.232,66.204c-17.487,15.822 -41.915,23.733 -73.282,23.733l-74.531,-0l0,114.087l-53.712,-0l-0,-293.545Zm121.581,138.237c36.919,-0 55.378,-16.1 55.378,-48.3c0,-16.377 -4.58,-28.521 -13.74,-36.433c-9.16,-7.911 -23.04,-11.866 -41.638,-11.866l-67.869,-0l0,96.599l67.869,-0Z" style="fill:#fff;fill-rule:nonzero;"/><g><path d="M489.128,957.813c28.591,-0 49.826,6.939 63.705,20.819c13.88,13.879 20.819,35.253 20.819,64.121l0,123.664l-49.548,-0l-0,-31.228c-4.719,10.825 -12.145,19.292 -22.276,25.398c-10.132,6.107 -21.86,9.161 -35.184,9.161c-13.602,-0 -25.954,-2.776 -37.057,-8.328c-11.104,-5.551 -19.848,-13.185 -26.232,-22.9c-6.385,-9.716 -9.577,-20.542 -9.577,-32.478c0,-14.989 3.817,-26.786 11.451,-35.392c7.633,-8.605 20.055,-14.85 37.265,-18.736c17.21,-3.887 40.944,-5.83 71.2,-5.83l10.41,0l-0,-9.576c-0,-13.879 -2.984,-23.872 -8.952,-29.979c-5.968,-6.107 -15.892,-9.161 -29.771,-9.161c-10.826,0 -22.138,1.874 -33.935,5.621c-11.797,3.748 -23.386,8.953 -34.767,15.615l-14.573,-35.809c11.381,-7.217 25.121,-13.185 41.221,-17.904c16.1,-4.719 31.367,-7.078 45.801,-7.078Zm-12.075,174.461c13.879,-0 25.191,-4.65 33.935,-13.949c8.744,-9.299 13.116,-21.304 13.116,-36.016l-0,-8.744l-7.495,0c-18.598,0 -33.033,0.833 -43.303,2.498c-10.271,1.666 -17.627,4.58 -22.068,8.744c-4.441,4.164 -6.662,9.854 -6.662,17.072c0,8.882 3.053,16.169 9.16,21.859c6.107,5.691 13.879,8.536 23.317,8.536Z" style="fill:#fff;fill-rule:nonzero;"/><path d="M719.384,1169.75c-21.374,-0 -39.903,-4.303 -55.587,-12.908c-15.683,-8.605 -27.688,-20.819 -36.016,-36.641c-8.327,-15.822 -12.491,-34.282 -12.491,-55.378c-0,-21.096 4.372,-39.764 13.116,-56.002c8.743,-16.239 21.165,-28.8 37.265,-37.682c16.1,-8.883 34.698,-13.324 55.794,-13.324c14.435,-0 28.522,2.29 42.262,6.87c13.741,4.58 24.775,10.756 33.102,18.529l-14.989,36.641c-8.605,-6.94 -17.696,-12.214 -27.273,-15.823c-9.576,-3.608 -19.084,-5.412 -28.521,-5.412c-18.043,-0 -32.061,5.621 -42.054,16.863c-9.993,11.242 -14.99,27.411 -14.99,48.507c0,20.819 4.997,36.85 14.99,48.092c9.993,11.242 24.011,16.863 42.053,16.863c9.438,-0 18.946,-1.804 28.522,-5.413c9.577,-3.609 18.668,-8.883 27.273,-15.822l14.989,36.224c-8.882,8.05 -20.263,14.365 -34.143,18.945c-13.879,4.581 -28.313,6.871 -43.303,6.871Z" style="fill:#fff;fill-rule:nonzero;"/><path d="M1058.73,1166.42l-29.562,-68.702l-142.817,-0l-29.563,68.702l-54.129,-0l132.824,-293.545l43.719,0l132.824,293.545l-53.296,-0Zm-154.891,-110.34l107.424,0l-53.712,-124.912l-53.712,124.912Z" style="fill:#fff;fill-rule:nonzero;"/><path d="M1256.92,957.813c24.427,-0 42.609,6.939 54.545,20.819c11.936,13.879 17.904,34.836 17.904,62.872l-0,124.913l-52.047,-0l0,-121.998c0,-15.822 -2.984,-27.342 -8.952,-34.559c-5.968,-7.217 -15.337,-10.826 -28.105,-10.826c-14.99,-0 -26.995,4.719 -36.017,14.157c-9.021,9.438 -13.532,22.068 -13.532,37.89l0,115.336l-52.047,-0l0,-203.608l50.798,0l-0,30.396c6.939,-11.381 16.239,-20.125 27.897,-26.232c11.659,-6.107 24.844,-9.16 39.556,-9.16Z" style="fill:#fff;fill-rule:nonzero;"/><path d="M1631.66,1007.78l0,140.735c-13.324,6.662 -29.493,11.936 -48.508,15.822c-19.014,3.886 -38.375,5.829 -58.084,5.829c-30.256,0 -56.488,-6.037 -78.695,-18.112c-22.206,-12.075 -39.208,-29.424 -51.006,-52.047c-11.797,-22.623 -17.696,-49.479 -17.696,-80.569c0,-30.811 5.899,-57.529 17.696,-80.152c11.798,-22.623 28.591,-39.972 50.382,-52.047c21.79,-12.075 47.397,-18.112 76.821,-18.112c20.541,-0 39.833,2.984 57.876,8.952c18.043,5.968 33.032,14.504 44.969,25.607l-17.905,38.723c-13.601,-10.548 -26.995,-18.112 -40.18,-22.693c-13.185,-4.58 -27.689,-6.87 -43.511,-6.87c-30.257,0 -53.088,8.952 -68.494,26.856c-15.406,17.905 -23.109,44.483 -23.109,79.736c0,72.172 31.645,108.258 94.934,108.258c18.876,-0 37.751,-2.637 56.627,-7.911l0,-73.699l-63.289,0l0,-38.306l111.172,-0Z" style="fill:#fff;fill-rule:nonzero;"/><path d="M1822.78,1170.16c-28.591,0 -53.365,-6.107 -74.323,-18.32c-20.957,-12.214 -37.126,-29.702 -48.507,-52.464c-11.381,-22.762 -17.072,-49.41 -17.072,-79.944c0,-30.534 5.621,-57.112 16.863,-79.736c11.243,-22.623 27.412,-40.041 48.508,-52.255c21.096,-12.213 45.94,-18.32 74.531,-18.32c28.591,-0 53.366,6.107 74.323,18.32c20.958,12.214 37.058,29.632 48.3,52.255c11.242,22.624 16.863,49.202 16.863,79.736c-0,30.534 -5.691,57.182 -17.072,79.944c-11.38,22.762 -27.55,40.25 -48.507,52.464c-20.958,12.213 -45.593,18.32 -73.907,18.32Zm0,-42.887c26.926,0 47.953,-9.299 63.081,-27.897c15.128,-18.598 22.692,-45.246 22.692,-79.944c0,-34.698 -7.564,-61.276 -22.692,-79.736c-15.128,-18.459 -36.155,-27.688 -63.081,-27.688c-27.203,-0 -48.369,9.229 -63.497,27.688c-15.128,18.46 -22.692,45.038 -22.692,79.736c-0,34.698 7.564,61.346 22.692,79.944c15.128,18.598 36.294,27.897 63.497,27.897Z" style="fill:#fff;fill-rule:nonzero;"/></g></g></svg> - Включите nunito без использования шрифтов Google в свой тег в документе. Здесь вы можете выбрать стили. Затем для встраивания выберите link (для html) или @import (если вы хотите включить через CSS) и скопируйте и вставьте эту ссылку в свой html или css-файл. Вам понадобится HTML-код, предоставленный Google.
Комментарии:
1. Спасибо за ваш ответ, я попробовал оба метода, но это не сработало. Можете ли вы показать мне какой-нибудь код, который мне нужно реализовать в файле svg или на странице html / css?
2. Для первого метода я добавил модифицированную версию SVG, чтобы показать, как она должна выглядеть после преобразования. Если вы попробовали этот метод, возможно, вы сделали это неправильно, потому что обычно он должен давать вам правильный результат. Для второго метода иногда SVG не распознает шрифт из Google из-за разных имен / стилей или весов. Убедитесь, что они точно совпадают. По-видимому, при вставке svg он подбирает стили шрифтов из Google, но они должны соответствовать тому, который у вас есть в SVG.
3. Первый метод, который вы предоставили, работает правильно! В моем коде была ошибка типа. Спасибо вам за вашу помощь.
4. Если вы используете Inkscape, чтобы преобразовать текст в контур, перейдите в раздел «Путь> Объект в путь».